Vue知识点

• Vue生命周期函

   

  1. beforeCreate(){}  在实例生成之前会自动执行的函数
  2. created(){}  在实例生成之后会自动执行的函数
  3. beforeMount(){}  在模板渲染完成之前执行的函数
  4. mounted(){}  在模板渲染完成之后执行的函数
  5. beforeUpdate(){}  当data中数据变化时，会立即自动执行的函数
  6. Updated(){}  当data中数据变化后时，页面重新渲染完成后，会自行执行的函数
  7. deforeUnmount(){}  当vue应用失效时，会自动执行的函数
  8. unmounted(){}  当vue应用失效时，且DOM完全销毁之后，会自动执行的函数

• 插值表达式（字面量）

  1. 可以使用js表达式如三元运算符（{{index>2?’大’:’小’}}）、数字运算（{{1+1}}）、字符串拼接（{{‘字符串’+’拼接’}}）

• 模板修饰符

  1. 如 @click.prevent  阻止默认事件
  2. stop：阻止事件冒泡
  3. once：事件只触发一次
  4. capture：使用事件的捕获模式
  5. self：只有event.target是当前操作的元素时才触发事件
  6. passive：事件的默认行为立即执行，无需等待事件的回调执行完毕

• 计算属性（computed）

  1. 计算属性的特性，当计算属性依赖的内容发生改变时，才会重新执行计算。
  2. get有什么作用：当有人读取“属性”时，get就会被调用，且返回值就作为“属性”的值
  3. get什么时候调用：1.初次读取“属性”时。2.所依赖的数据发生变化时
  4. set什么时候调用：当“属性”被修改时

         总结：

                1、定义：要用的属性不存在，要通过已有属性计算得来；

                2、原理：底层借助了Object.defineproperty方法提供的getter和setter；

                3、get函数什么时候执行？

                        1） 初次读取时会执行一次

                         2） 当依赖的数据发生改变时会被再次调用

                4、优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。

                5、备注：1、计算属性最终会出现在vm上，直接读取使用即可。2、如果计算属性要被修改，那必须写在set函数去响应修改，且set中要引起计算时依赖的数据发生改变

•  监视属性（watch） 

        1、当被监听的属性改变时，回调函数自动调用，进行相关操作

        2、监视的属性必须存在，才能进行监视

        3、监视的两种方法：

                1）new vue是传入watch配置

                2）通过vm.$watch监视

        4、深度监视：

                1）vue中的watch默认不监测对象内部值的改变（一层）

                2）配置deep：true可以监测对象内部值改变（多层）。

        备注：

                1）vue自身可以监测对象内部值的改变，但vue提供的watch默认不可以！

                2）使用watch时根据数据的具体结构，决定是否采用深度监视

watch:{
    //正常写法
    isHot:{
    immediate:true,//初始化时让handelr调用一下
    deep:true,//开启深度监视  监视多级结构中所有的属性的变化
    //handler什么时候调用：当isHot发生改变时
    handler(newVal, oldVal){
            
        }
    }，
    //简写
    isHot(newVal, oldVal){

    }
}

•   监视属性（watch）与计算属性的区别

        总结：

                1）computed能完成的功能，watch都可以完成

                2）watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作

        两个重要的小原则：

                1）所有被vue管理局的函数，最好写成普通函数，这样this的指向才是vm或者组件实例对象。

                2）所有不被vue管理的函数（定时器的回调函数、ajax的回调函数、promise的回调函数等），最好写成箭头函数这样this的指向才是vm或组件实例对象

• Vue  el的两种写法 

  1. 第一种：el:”#root”
  2. 第二种：用实例化对象v.$mount(‘$root’)

         总结：第一种方便，第二种灵活可以动态控制vue模版数据加载的时间

• Vue  MVVM模型

  1. M：模型Model：对data中的数据（一般JavaScript对象）
  2. V：视图（view）：模版（DOM）
  3. VM：视图模型（viewModel）:Vue实例对象（data Bindings，DOM Listeners）data Bindings：将model数据放到view指定位置；DOM Listeners：model对于view监听

        总结：1.data中所有的属性，最后都出现在vm身上。

                   2.vm身上所有的属性及vue原型上所有的属性，在vue模版中都可以直接使用

• Object.defineproperty方法

  1. Object.defineproperty参数（对象，‘属性’，｛配置项：value：“18”｝）
  2. Object.defineproperty生成的属性不可‘枚举（遍历）’，也不可修改
  3. Object.defineproperty想要生成的属性可‘枚举’在配置项中添加enumerable：true//控制属性是否可以枚举；可修改在配置项中添加writable：true//控制属性是否可以被修改；
  4. Object.defineproperty：配置项中get（）｛return 值｝//当有人读取参数中“对象”的“属性”时get函数就会被调用，且返回值就是“属性”的值；可以实现数据的同步绑定，动态赋值的return 值改变是生成的属性也同步改变。
  5. Object.defineproperty：配置项中set（value）｛值=value｝//当有人修改生成的属性时，set函数就会被调用，且会收到修改的具体值

                总结：Object.defineproperty  可以将对象的属性动态赋值时将在赋值对象改变时被赋值对象同步改变进行关联，通过get、set进行数据代理数据同步更改

• Vue中的数据代理 

  1. Vue中数据代理：通过vm对象来处理data对象中属性的操作（读/写）
  2. Vue中的数据代理的好处：更加方便的操作data中的数据
  3. 基本原理：通过Object.defineproperty（）把data对象中所有属性添加到vm上为每一个添加到vm上的属性，都指定一个get/set。在get/set内部去操作（读/写）data中对应的属性

• Vue 事件绑定 

  1. methods中配置的函数，不要用箭头函数！否则this就不是vm了而是window对象
  2. methods中配置的函数，都是被vue所管理的函数，this的指向是vm或者组件实例对象；
  3. 提示用v-on：xxx或@xxx绑定事件，其中xxx是事件名
  4. @click=‘demo’和@click=‘demo（$event）’效果一致，但后者可以传参数 

•  Vue for中的key作用  

         key的作用：key是虚拟DOM对象的表示，当数据发生变化时，vue会根据【新数据】生成【新的虚拟DOM】，随后vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较

        1、使用index作为key可能会引发的问题：

                1）若对数据进行：逆序添加、逆序删除等破坏顺序的操作：

                        会产生没有必要的真实DOM更新===>界面效果没问题，但效率低。

                2）如果结构中还包含输入类的DOM：

                        会产生错误的DOM更新==>界面有问题。

                3）最好使用唯一标识作为key，如果不存在对数据顺序的破坏操作使用index是没有问题

        2、对比规则：

                1）旧虚拟DOM中找到了与新虚拟DOM相同的key：

                        @.若虚拟DPM中内容没变，直接使用之前的真是DOM！

                        @.若虚拟DOM中内容变了，则生成新的真实DOM，随后替换掉页面中之前的真实DOM。

                2）旧虚拟DOM中未找到与新虚拟DOM相同的key

                        创建新的真实DOM，随后渲染到页面

• Vue 是如何监听数据的

        1、vue会监视data中所有层次的数据。

        2、如何监测对象中的数据：

                通过setter实现监视，且要在new Vue时就传入要监测的数据

                1）对象中后追加的属性，Vue默认不做响应式处理

                 2）如需给后添加的属性做响应式，请使用如下api

                        vue.set（target，properNmae/index，value）或

                         vm.$set(target，propertNname/index，value)

        3、 如何监测数组汇总的数据：

                通过包裹数组更新元素的方法实现，本质就是做了两件事：

                        1）调用原本对应的方法对数组进行更新。

                        2）重新解析模版，进而更新页面。

        4、在Vue修改数组中的某个元素一定要用如下的方法：

                1、使用这些API：push()、pop()、shift()、unshift()、splice()、sort()、reverse()

                 2、Vue.set()或vm.$set()

        注意：Vue.set（）和vm.$set（）不能给vm的根数据对象添加属性 

   //简单的实现vue数据监听
    let data={
        name:'名字',
        address:'地址'
    }
    //创建一个监视的实例对象，用于监视data中属性的变化
    const obs= new Observer(data)
    console.log(obs)
    //生成一个创建监听的构造函数
    function Observer(obj){
        //汇总对象中所有的属性形成一个数组
        const keys=Object.keys(obj)
        // 遍历  这个只有一层循环   vue使用递归直到找到最后一个对象为止都进行defineProperty
        keys.forEach((k)=>{
            // 往this上添加一个属性，this指定的是实例对象
            Object.defineProperty(this,k,{
                get(){
                    return obj[k]
                },
                set(val){
                    console.log('${k}被改了，我要去解析模版了，生成虚拟DOM...')
                    obj[k]=val
                }
            })
        })
    }
    // 准备一个vm对象
    let vm={}
    vm._data=data=bos

• Vue.set

  1. vue中新增一个未定义的属性后无法实现数据的响应式，通过vue提供的set  api进行后添加属性可以实现数据响应式

this.$set(对象,"属性名","值")
vue.set(对象,"属性名","值")