vue学习总结

一.Vue中computed与method的区别

        相同点:

        如果作为模板的数据显示，二者能实现响应的功能，唯一不同的是methods定义的方法需要执行;

        不同点：

         1.computed 会基于响应数据缓存，methods不会缓存；

        2.diff之前先看data里的数据是否发生变化，如果没有变化computed的方法不会执行，但methods里的方法会执行;

         3.computed是属性调用，而methods是函数调用。

二.vue中组件的data为什么是一个函数？而new Vue实例里，data可以直接是一个对象？

        vue组件实际上是一个Vue实例。然而一个构造函数可以new出来多个实例，而且每个实例都会继承原型上的方法或属性。由此可知Vue的data数据就是原型上的属性，数据存在内存中。那么Vue为了保证每个实例上data数据的独立性，就规定了必须使用函数而非对象。因为使用对象的话，每个实例（组件）上是使用的data数据会相互影响。对象是对于内存地址的引用，直接定义一个对象的话组件之间都会使用这个对象，这样会造成组件之间的数据互相影响。使用函数后，使用的是data()函数，data（）函数中的this是指向实力本身的，就不会相互影响了。而new Vue实例是不会被复用的，因此就不存在引用对象的问题。

三.Vue中watch用法详解

在vue中，使用watch来监听数据的变化；

1. 监听的数据后面可以写成对象的形式，包含handler方法，immediate和deep;

2. immediate表示在watch中首次绑定的时候是否执行handle，值为true则表示在watch中声明的时候，就立即执行handler方法，值为false,泽合一般使用watch一样，在数据发生变化的时候才执行handler.

3. 当需要监听一个对象的改变是，普通的watch方法无法监听到对象内部属性的变化，只有data中的数据才能够监听到变化，此时就需要deep属性对对象进行深度监听。

   watch: {
       name: {
         handler(newName, oldName) {
         
         },
         deep: true,
         immediate: true
       }
     }