vuejs之选项-数据 的笔记与理解

Posted 2021-05-01 许我倾心

vue的选项/数据总共有6种，分别为：data、props、propsData、computed、methods、watch。

data

类型：Object | Function

限制：组件的定义只能接受function

理解：

（1）data是Vue实例的数据对象。对象必须是纯粹的对象，含有零个或者多个key/value对。

（2）vue会递归将data的属性转换为getter/setter，从而让data的属性能够响应数据的变化

（3）实例创建之后，可以通过vm.$data访问原始的属性，由于vue实例代理了data对象上所有的属性，因此也可以用vm.a等价于vm.$data.a

（4）需注意以 _ 或 $ 开头的属性不会被vue实例代理，因为它们可能与vue内置的属性、API方法冲突，因此为了理解方便尽量避免以  _ 或 $ 开头，若迫不得已使用它们开头，可以通过vm.$data访问，vm. 是不可以的

   

props

类型：Array<string>|Object

理解：

（1）props可以是数组或对象，用于接收父组件的数据

propsData

类型：{ [key:string]:any }

限制：只用与new创建的实例中

理解：创建实例时传递props。主要作用时方便测试（无父级时）

computed

类型：{ [key: string]: Function | { get: Function, set: Function } }

理解：

（1）是计算属性

（2）默认只用getter，在需要的时候可以自定义一个setter

（3）计算属性的结果会被缓存，是基于它们的依赖进行缓存的，只有在相关依赖发生改变时，它们才会重新计算。

扩展：vuex在store中定义getter，和计算属性一样具有缓存功能。

methods

类型：{ [key: string]: Function }

理解：

（1）methods将被混入到vue实例中，用来定义方法，可以直接通过vue实例访问这些方法，或者在指令表达式中使用。

（2）方法中的this自动绑定到vue实例中，为了不破坏这种绑定，不应该使用箭头函数来定义method函数。

watch

类型：{ [key: string]: string | Function | Object | Array }

理解：

（1）一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。vue实例在实例化时调用$watch()，遍历watch对象的每一个属性。

（2）同样，不要使用箭头函数来定义watcher函数

目前，对这些的理解还处于比较浅的层次，随着以后深入理解，再更新该文章。