Vue 重点总结

mvvm原理？

        当我们创建一个Vue实例对象，配置data选项 ，Vue会立即遍历这个data对象，通过defineproperrty底层原理 将data内的数据转换成gettrr/setter，

同时Vue会为每个vm实例对象创建一个观察者，当开发者更改了一处代码进行保存之后（即setter被触发时），setter会通知观察者（Watcher）调用render函数，

生成虚拟DOM树，通过diff算法，对前一次生成的虚拟DOM树进行比较，得到代价最小的处理方法来更新我们的虚拟Dom。

 

什么是虚拟DOM树？

 

　　  虚拟DOM树其实就是一个普通的js对象，它是用来描述一段HTML片段的

 

　　   01    当页面渲染的时候Vue会创建一颗虚拟DOM树

 

          02    当页面发生改变Vue会再创建一颗新的虚拟DOM树

 

          03    前后两颗新旧虚拟DOM树进行对比，Vue通过diff算法，去记录差异的地方

 

          04    将有差异的地方更新到真实的DOM树中

        diff算法的特点 ：

          1 做到同层比较

         2 如果同层 每个元素 都有key属性 按照同层 同key进行比较

          循环中： 一定要给循环元素加独一无二的key属性（使用id，如果使用index的话，Object.defineProperty setter捕获不到 数组[下标]=值）

         

 

如何使用组件来构造页面？　　

     01.定义组件：

          组件创建方式：

             1.Vue.extend（{option配置对象}） 即调用构造函数身上自带的方法               

               2. 将组件内有的html结构存放在template内，配置与我们的vm基本相同 但这里的data是一个函数 函数内返回我们需要的数据 （值传递与引用传递的问题）

      02.注册组件：

          1.全局注册： 即在实例对象内不注册任何的局部组件  在全局Vue.component('hello',hello)，第一个参数为组件名 第二个参数为组件地址

           2.局部注册：将组件存放入需要使用局部组件的父级的components中  组件名和key名保持一致可以简写

 

 

       03.使用组件：

          <组件名></组件名>

 

 

注意：使用组件的时候注意组件名的书写格式  

            组件命名 推荐使用 大驼峰 CommonHead 或者 连接符- common-head

           注意 不管是以上哪种命名 使用组件时 都要变成小写，通过驼峰要变-(第一个单词除非)  <common-head/>

 

 

组件嵌套：

 1.子组件要在父组件之前建立

 2.子组件的使用 要在父组件的模板内

 3.要在父组件内注册子组件

 

 

侦听器

功能：侦听实例上某个属性的变化 如果改变则侦听器触发

            基础侦听器 侦听基础数据类型和数组

              侦听对象  直接侦听对象的某个属性

注：新增 options对象watch属性，在watch新增同名的方法即可

 

 

 

 

Object.defineProperty：

作用：就是直接在一个对象上定义一个新属性，或者修改一个已经存在的属性

Object.defineProperty(obj, prop, desc)

obj =>需要定义属性的当前对象      prop=> 当前需要定义的属性名    desc=>属性描述符

 

如何配置props？

    功能：让组件接收外部传过来的数据

    1.传递数据：

 

<father name='***'/>

2.接收数据

第一种方式（只接收）

props：['name']

第二种方式（限制类型）

props：{
      name：Number
}

第三种方式（限制类型，限制是否必传，指定默认值）

props：{
     name：{
          type：String, //类型
          required：true， //必要性
          default：'老王'     //默认值
       } 
}

 

       注意：props是只读的，Vue底层会监测你对 props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，

那么请复制props的内容到data中一份然后去修改data中的数据。 props 是由父传递给子的子组件中不能修改props

 

 

ref配置通信（父组件中通过ref获取子组件实例）

1、在需要获取的 dom标签或者组件标签上添加ref属性（将对应的dom对象或者组件实例挂载到组件$refs属性上）

const Father = {

template: `

<div>

<h1 ref="title">这是父组件</h1>

<child ref="child"></child>

<button ref="btn">按钮</button>

</div>

`

}

 

 

2、通过组件this.$refs获取

this.$refs.title // 获取是上面的h1标签

this.$refs.child // 获取是子组件child的实例

this.$refs.btn // 获取的是 button这个标签

 

子向父通信：触发一个自定义事件

触发子组件的自定义事件，父组件通过子组件标签来监听这个事件完成通信

1、父组件中通过子组件标签监听事件

2、如何触发一个组件的自定义事件

        this.$emit('事件'[,携带参数])

this.$emit('click', 10)
    this.$emit('piupiupiu', {a: 10,b: 20})

兄弟组件通信：

自定义事件：

1、触发自定义事件

2、监听自定义事件

注意：

哪个实例调用$emit触发自定义事件，就必须由这个实例通过以上两种方法监听

事件中心总线实现通信：

原理：

定义一个第三方的实例（用全局变量保存）

事件中心总线 （event bus）

 

 

组件的生命周期：

是什么：组件的生命周期 即组件的实例化到其销毁的过程

组件的生命周期大致可以分为四个阶段，每个阶段都会触发不同的钩子函数；

实例初始化阶段：beforeCreate=>此时的数据代理还未完成，我们无法通过vm访问到data内的数据 

                            created=>  数据代理已完成，可以访问

   编译tem阶段： beforeMount=>虚拟dom已生成但页面还未挂载

                            mounted =>真实dom已挂载，此阶段已经可以操作dom

         更新阶段： beforeUpdate=> 数据已经更新完毕，页面还未更新

                            updated=>数据与页面均已更新

        销毁阶段：  beforeDestory=>vm中所有的：data、methods、指令等等都处于可用状态，马上要执行销毁过程，一般在此阶段，要关闭定时器，取消订阅消息、解绑自定义事件等收尾操作。

                            destroyed=>组件销毁完毕              

 

未完。。。