Vue进阶

一.computed高级

computed是一种计算属性

computed里面的函数，第一次调用会执行，等到第二次调用，会从缓存中进行获取数据【我们在使用computed中的函数时，其实执行的是get函数】

getter：获取数据【当使用到了计算属性，就会自动执行get函数】

setter：设置数据【当更改了计算属性，就会自动执行set函数】 

代码如下：

    
    
    





    更改computed数据

    {{getValue}}
    {{getValue}}
    {{num}}

    点击
    {{count}}
    点击

 运行结果：

二.watch监听器

watch：用于监听某个数据是否更改，并且更改后执行一些其他 *** 作【方法】

代码如下：

    
    
    





    {{value}}

    更改value值

 运行结果如下：

 三.watch深度监听

watch：用于监听某个数据是否更改，并且更改后执行一些其他 *** 作【方法】

 只要被监听的数据发⽣改变，就会触发对应的逻辑代码。如果被监听的数据是个对象（或数组），对象（或数组）中的属性发⽣改变时，监听是不会触发上的，故使用深度监听。
深度监听数组代码如下：

    
    
    





    {{array}}

    更改数组

深度监听对象代码如下：

    
    
    





    {{array}}

    更改对象

四.计算属性和监听器区别

1、计算属性

        1.1、get函数必须有return

        1.2、计算属性名称可以自定义

        1.3、计算属性具备缓存

        1.4、计算属性适合处理一些复杂的数据运算等等

2、监听器

        2.1、watch中的函数return可有可无

        2.2、watch中的名称必须和data中的名称一致

        2.3、watch不具备缓存

        2.4、watch适合处理一些消耗性能的需求，比如：Ajax请求等等

五.真实DOM和虚拟DOM

真实DOM：在页面中展示的

虚拟DOM：vue创建的

虚拟DOM和真实DOM会进行比较，比较的方式：Diffing算法

当数据改变后，Vue创建虚拟DOM，与真实DOM进行比较，更改的是数据外层的标签，并不是只单单更改数据。

vue会创建虚拟DOM和真实DOM进行比较，如果发现没有改变，那么不会创建对应的真实DOM，如果发现数据改变，则会创建真实DOM，因此减少了DOM *** 作，提高了效率和性能。

六.key属性

为 v-for 设置键值必要

总是用 key 配合 v-for。

在组件上总是必须用 key 配合 v-for，以便维护内部组件及其子树的状态。甚至在元素上维护可预测的行为，比如动画中的对象固化 (object constancy)，也是一种好的做法。

风格指南 — Vue.jsVue.js - The Progressive JavaScript Frameworkhttps://cn.vuejs.org/v2/style-guide/#%E4%B8%BA-v-for-%E8%AE%BE%E7%BD%AE%E9%94%AE%E5%80%BC%E5%BF%85%E8%A6%81 

    
    
    





    
        

            下标：{{index}}
            >>>>>>
            姓名：{{item.name}}
            >>>>>>
            ID：{{item.id}}
            >>>>>>
            

        
    

    更改数据