[油猴脚本开发指南]Data Property 和方法
# 前文Vue系列基本属于我直接对抄vue的官方指南+自己平时开发的理解写的
其实意义和知识浓度并不大
甚至某种意义可以算是无聊的抄袭了
主要是因为如果不衔接vue往后的断层实在太大了
# Data Property
组件的data选项是一个函数，在vue组件实例化的时候会调用函数，返回一个对象
并且将该对象的所有属性都变成响应式的内容
```javascript
const app = Vue.createApp({
data() {
return { count: 4 }
}
})
const vm = app.mount('#app')
console.log(vm.$data.count) // => 4
console.log(vm.count) // => 4
// 修改 vm.count 的值也会更新 $data.count
vm.count = 5
console.log(vm.$data.count) // => 5
// 反之亦然
vm.$data.count = 6
console.log(vm.count) // => 6
```
这里之所以data是一个函数，是因为如果是对象，会导致所有的相同组件都会共享一个data属性
当我们对data()函数里返回一个对象后
vue实例初始化的时候，首先会遍历该对象挂在到$data属性上
在同时挂在到vue实例上，使用的是obejct.defineproperty
如果我们访问vue实例对象的属性，则通过get函数找到$data，然后再读取值
所以说二者是等价的，但是平时我们不建议使用$data属性来进行访问
响应式无论是在vue2或vue3的时候都是需要一定的损耗的
所以需要模板进行响应的时候我们在data函数里写入
如果并不需要，仅需要设置固定数据或需要存储一些东旭，并不需要响应式
我们可以考虑直接对vue实例设置对应数据
如vm.a=6或在created使用this.a=6
# 方法
```javascript
const app = Vue.createApp({
data() {
return { count: 4 }
},
methods: {
increment() {
// `this` 指向该组件实例
this.count++
}
}
})
const vm = app.mount('#app')
console.log(vm.count) // => 4
vm.increment()
console.log(vm.count) // => 5
```
vue的方法函数是放在methods对象里
vue在初始化的时候会遍历methods对象，获取所有的函数，挂载到vue实例上，与数据的初始化基本一致
但是他会对函数进行一个bind处理，这样会将this的指向锁死成vue实例上
我们在函数内调用另一个函数通常需要
this.xxx
但是再模板里使用并不需要带this
因为vue模板编译后会转化成
with(vue实例){
函数调用()
}
也就是说模板早已经自动绑定了this值
所以在vue模板里我们直接
```javascript
<button @click="increment">Up vote</button>
```
就可以了
我们也可以在模板内使用函数
```javascript
<span :title="toTitleDate(date)">
{{ formatDate(date) }}
</span>
```
在调用函数内如果访问了变量，依然会收集响应的响应式数据，记录哪个vue实例访问了响应的数据
就像在模板使用的一样，但是注意，函数内不应该改变数据，因为这将会触发下一次渲染
# 结语
撒花~
哥哥好猛我好爱 陈公子的话 发表于 2022-2-9 19:40
哥哥好猛我好爱
wuwuwu
完全对抄vue文档
页:
[1]