当前位置: 首页 > news >正文

Vue.createApp的对象参数

目录

template 属性

data 属性

methods 属性

疑问

function 函数的两种写法

methods 属性中 this 的指向

总结


Vue 实例是通过 Vue.createApp() 创建的,该函数需要接收一个对象作为参数,该对象可添加 template、data、methods 等属性。

template 属性

vue.js 3 中的 template 属性用于定义需要渲染的模板内容,其中包括 html 标签或组件,最终将其挂载到 元素上,相当于为 innerHTML 赋值。

在模板中,会使用一些语法,例如 {{}} 和 @click 等。

data 属性

data 属性用于为 vue.js 组件定义响应式数据,该属性需要传入一个函数,该函数返回一个对象。

该对象会被 vue.js 劫持,之后对该对象的修改或访问都会在劫持中被处理,所以该对象中定义的数据都是响应式的。

例如,在 template 中通过使用 {{counter}},可访问到该对象定义的 counter;当修改 counter 时,template 中的 {{counter}} 也会发生改变。

在浏览器中运行代码时,需要注意。

在 vue.js 2 中,data 属性可传入一个对象。

在 vue.js 3 中,data 属性必须传入一个函数,否则会在浏览器中报错。

methods 属性

methods 属性需要传入一个对象,通常会在这个对象中定义很多方法,可以被绑定到模板中,在该方法中,可以使用 this 直接访问 data 返回对象的属性。

methods 中定义的方法不能使用箭头函数。

疑问

为什么 methods 属性中定义的方法不能使用箭头函数?

https://v2.cn.vuejs.org/v2/api/#methods

https://cn.vuejs.org/api/options-state.html#methods

function 函数的两种写法

// function 函数的简写语法
decrement() {this.counter--;console.log('decrement=>', this)
},
// function 函数的完整语法
decrement:function() {this.counter--;
}

可知,简写是在完整的基础上少了 :function

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"></div><!-- 用 <template> 标签编写模板内容,需要添加 id 属性 --><template id="why"><div><h2>{{message}}</h2><h2>{{counter}}</h2><button @click="increment">+1</button><button @click="decrement">-1</button></div></template><script src="./js/vue.js"></script><script>Vue.createApp({template: '#why', // 通过id选择器选中 <template id="why"></template> 模板data: function() {return {message: "methods中的this",counter: 100}},methods: {// 1.箭头函数increment:() => {this.counter++;console.log('increment=>', this)},// 2.function 函数的简写语法decrement() {this.counter--;console.log('decrement=>', this)},// 3.function 函数的完整语法// decrement:function() {//     this.counter--;// }}}).mount('#app');</script>
</body>
</html>

在浏览器中运行代码,f12 打开控制台,先点击 -1 按钮,再点击 +1 按钮,控制台输出如下

箭头函数中的 this 会指向 Window,这里涉及箭头函数使用 this 的查找规则,它会在自己上层作用域中查找 this。这里找到的刚好是 script 作用域中的 this,所以就是 Window。

就是 vue.js 在执行过程中创建了一个 Proxy 对象,通过代理对象来处理数据,不是js原生的 Window 对象。

methods 属性中 this 的指向

在 vue.js 3源码中,所在在 methods 中定义的方法都会被遍历,通过 bind 函数绑定 this,确保方法中的 this 指向 vue 实例的代理对象。

​​​​​​https://github.com/vuejs/core/blob/v3.2.23/packages/runtime-core/src/componentOptions.ts#L633

通过 bind() 为每个函数绑定了 publicThis,即 vue 实例的代理对象。

https://github.com/vuejs/core/blob/v3.2.23/packages/runtime-core/src/componentOptions.ts#L544

除了 methods 中的 this 指向 vue 实例的代理对象,data、computed、watch 等也都绑定了同一个 this。

Vue.createApp() 的对象除了可以编写 template、data、methods 属性,还可以定义其他属性,比如 props、computed、watch、emits、setup 和生命周期函数等。

总结

Vue.createApp的对象参数

属性名作用注意事项
template定义需要渲染的模板内容
data为 vue.js 组件定义响应式数据该属性需要传入一个函数,该函数返回一个对象
methods需要传入一个对象,通常会在这个对象中定义很多方法,可以被绑定到模板中,在该方法中,可以使用 this 直接访问 data 返回对象的属性。methods 中定义的方法不能使用箭头函数。

http://www.lryc.cn/news/502303.html

相关文章:

  • 短信验证码burp姿势
  • ubuntu WPS安装
  • 中粮凤凰里共有产权看房记
  • 学习笔记068——Hibernate框架介绍以及使用方法
  • Maven 安装配置(详细教程)
  • 虚幻开发中的MYPROJECTFORPLUG_API
  • 顺序栈及其实现过程
  • 内圆弧转子泵绘制工具开发
  • linux网络编程 | c | 多进程并发服务器实现
  • Vins_Fusion_gpu中source setup.bash
  • 怎么理解大模型推理时的Top_P参数?
  • hive+hadoop架构数仓使用问题记录
  • 前端的 Python 入门指南(三):数据类型对比 - 彻底的一切皆对象实现和包装对象异同
  • Axios结合Typescript 二次封装完整详细场景使用案例
  • 基于Kubesphere实现微服务的CI/CD——部署微服务项目(三)
  • 【使用webrtc-streamer解析rtsp视频流】
  • element左侧导航栏
  • 【金融贷后】贷后运营精细化管理
  • 学习CSS第七天
  • Image Stitching using OpenCV
  • CentOS7 安装Selenium(使用webdriver_manager自动安装ChromeDriver)
  • 鸿蒙手机文件目录
  • 泷羽Sec学习笔记-Bp中ip伪造、爬虫审计
  • 电子电工一课一得
  • Cesium 限制相机倾斜角(pitch)滑动范围
  • 配置ssh-key连接github
  • Linux——进程控制模拟shell
  • 【HarmonyOS】鸿蒙应用实现手机摇一摇功能
  • Kael‘thas Sunstrider Ashes of Al‘ar
  • CNCF云原生生态版图