[油猴脚本开发指南]Data Property 和方法

李恒道

前文

Vue系列基本属于我直接对抄vue的官方指南+自己平时开发的理解写的

其实意义和知识浓度并不大

甚至某种意义可以算是无聊的抄袭了

主要是因为如果不衔接vue往后的断层实在太大了

Data Property

组件的data选项是一个函数，在vue组件实例化的时候会调用函数，返回一个对象

并且将该对象的所有属性都变成响应式的内容

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

方法

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模板里我们直接

<button @click="increment">Up vote</button>

就可以了

我们也可以在模板内使用函数

<span :title="toTitleDate(date)">
  {{ formatDate(date) }}
</span>

在调用函数内如果访问了变量，依然会收集响应的响应式数据，记录哪个vue实例访问了响应的数据

就像在模板使用的一样，但是注意，函数内不应该改变数据，因为这将会触发下一次渲染

结语

撒花~

陈公子的话

哥哥好猛  我好爱  

李恒道

陈公子的话 发表于 2022-2-9 19:40
哥哥好猛  我好爱

wuwuwu
完全对抄vue文档