草帽海贼团

1、watch钩子函数监听数据的变化 watch 的一个特点是，最初绑定的时候是不会执行的，要等到 firstName 改变时才执行监听计算。 <div> <p>FullName: {{fullName}}</p> <p>FirstName: <input type="text" v-model="firstName"></p> </div> new Vue({ el: '#root', data: { firstName: 'Dawei', lastName: 'Lou', fullName: '' }, watch: { firstName(newName, oldName) { this.fullName = newName + ' ' + this.lastName; } } }) handler方法和immediate属性 这时候需要增加immediate属性，设置为true，如果不需要就设置false，那就是初始化不会监听变化，这时候需要将watch部分的代码修改如何 watch: { firstName: { handler(newName, oldName) { this.fullName = newName + ' ' + this.lastName; }, // 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法

转载地址： https://blog.csdn.net/yuwenshi12/article/details/78561372 从作用机制和性质上看待methods,watch和computed的关系 首先要说，methods,watch和computed都是以函数为基础的，但各自却都不同 而从作用机制和性质上看,methods和watch/computed不太一样，所以我接下来的介绍主要有两个对比： 1.methods和(watch/computed)的对比 2.watch和computed的对比 作用机制上 1.watch和computed都是以Vue的依赖追踪机制为基础的，它们都试图处理这样一件事情：当某一个数据（称它为依赖数据）发生变化的时候，所有依赖这个数据的“相关”数据“自动”发生变化，也就是自动调用相关的函数去实现数据的变动。 2.对methods:methods里面是用来定义函数的，很显然，它需要手动调用才能执行。而不像watch和computed那样，“自动执行”预先定义的函数 【总结】：methods里面定义的函数，是需要主动调用的，而和watch和computed相关的函数，会自动调用,完成我们希望完成的作用 从性质上看 1.methods里面定义的是函数，你显然需要像”fuc()”这样去调用它（假设函数为fuc） 2.computed是计算属性

从作用机制和性质上看待methods,watch和computed的关系 首先要说，methods,watch和computed都是以函数为基础的，但各自却都不同 而从作用机制和性质上看,methods和watch/computed不太一样，所以我接下来的介绍主要有两个对比： 1.methods和(watch/computed)的对比 2.watch和computed的对比 作用机制上 1.watch和computed都是以Vue的依赖追踪机制为基础的，它们都试图处理这样一件事情：当某一个数据（称它为依赖数据）发生变化的时候，所有依赖这个数据的“相关”数据“自动”发生变化，也就是自动调用相关的函数去实现数据的变动。 2.对methods:methods里面是用来定义函数的，很显然，它需要手动调用才能执行。而不像watch和computed那样，“自动执行”预先定义的函数 【总结】：methods里面定义的函数，是需要主动调用的，而和watch和computed相关的函数，会自动调用,完成我们希望完成的作用 从性质上看 1.methods里面定义的是函数，你显然需要像”fuc()”这样去调用它（假设函数为fuc） 2.computed是计算属性，事实上和和data对象里的数据属性是同一类的（使用上）, 例如： computed:{ fullName: function () {