11.Vue小小结

1. Vue实例：每个 Vue 应用程序都是通过 Vue 函数创建出一个新的 Vue 实例开始的

image.png

在创建一个 Vue 实例时，你会传入一个选项对象(options object)

选项对象：一般地，当模板内容较简单时，使用data选项配合表达式即可。涉及到复杂逻辑时，则需要用到methods、computed、watch等方法。

2. Vuejs中关于computed、methods、watch的区别

• computed：计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例；

• methods：methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例；

• watch：是一种更通用的方式来观察和响应 Vue 实例上的数据变动。一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性。

通俗来讲：

1.computed是在HTML DOM加载后马上执行的，

2.如赋值；而methods则必须要有一定的触发条件才能执行，如点击事件；

3.watch呢？它用于观察Vue实例上的数据变动。对应一个对象，键是观察表达式，值是对应回调。值也可以是方法名，或者是对象，包含选项。

所以他们的执行顺序为：默认加载的时候先computed再watch，不执行methods；等触发某一事件后，则是：先methods再watch。

computed可以添加很多实例属性，这些属性可以通过实例直接获取到，是通过将作用函数作为属性的getter，通过访问属性就能调用getter来返回值 所以使用的是属性，而不是属性声明的函数；

image.png

所以在上面代码中模板中computedde调用的是属性所以不带括号，而methods定义的是方法所以在使用的时候要加 ( ) ；computed 属性会基于它所依赖的数据进行缓存

computed中属性定义的时候，若只定义一个函数则默认为getter函数, 若要定义setter可以使用{}声明多个属性方法

image.png

调用setter函数的方法是vm.newProperty = 'newValue' 直接参数赋值即可

3. 在