vue重要知识点总结（一）

 监听的属性发生改变就会执行回调函数
      注意：Vue所管理的函数，都不能写成箭头函数，
      Vue管理的函数：methods中定义的函数，计算属性，监听器中的函数

# 事件修饰符
	vue中的事件修饰符：
		1.prevent：阻止默认事件（常用）；原生阻止默认行为：event事件对象.preventDefault()
		2.stop：阻止事件冒泡（常用）；原生阻止冒泡：event事件对象.stopPropagation()
		3.once：事件只触发一次（常用）之后就不会触发绑定的事件函数；
		4.capture：使用事件的捕获模式：意思是再事件捕获阶段就执行绑定的事件处理函数
		默认事件触发有两个阶段：
		  一，事件捕获阶段，由外向内进行事件的捕获，此阶段不会执行事件处理函数，
		  二，事件冒泡阶段，由内向外进行事件冒泡，此阶段会指向绑定的事件处理函数，先触发内部绑定的事件
		5.self：只有event.target是当前操作的元素时才触发事件；触发事件函数执行的元素是绑定事件的元素
		6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕；
		默认是：事件一被触发，先执行事件处理函数，等到事件处理函数执行完毕后，然后才会执行事件的默认行为
		7.native 组件标签绑定的事件的修饰符，添加上这个修饰符才会把内置事件绑定给组件内部的根元素

# 计算属性详解
	计算属性：在vue中放在data中的数据都是属性，计算属性是对data中的数据进行处理
    计算属性的原始写法
      computed:{
        计算属性名:{
          get(){
            return 计算属性的值
          },
          set(value){
            get中依赖的数据=value
          }
        }
      }
    计算属性中的get调用时机：
      (1).页面中初次使用计算属性时会执行一次。
      (2).当计算属性依赖的数据（return返回的数据就是依赖的数据）发生改变时会被再次调用。   
    计算属性中set调用时机
      (1).当计算属性被修改时
	  
    使用计算属性获取值的方式是调用get函数，获取get函数的返回值
    计算属性在第一次执行后，vue会将计算属性就缓存下来，之后使用到的同一个计算属性就不会再次去执行get获取，而是去找缓存

    默认的计算属性中的值是不能被修改的

    如果需要直接修改计算属性(如果不需要修改计算属性的值，那么就直接使用计算属性的简写)
    那么就需要在计算属性中添加上set方法，set方法接收需要修改的值，然后将需要修改的值赋值给get函数中所依赖的数据
    
    计算属性不能与data中的属性重名
    如果计算属性不需要被修改，那么直接写计算属性的简写方式即可

    简写方式：
    computed:{
      计算属性名(){
        return 计算属性的值
      }
    }
# 监听器详解
	监听器监听的属性是data中的数据，或者是计算属性，或者是props中的数据
    监听器有两种写法：
    1。Vue监听器：

      watch:{ //完整写法：需要使用immediate，deep时，使用完整写法
        "需要监听的数据":{
          immediate:true/false(默认值) 是否初始化完毕watch后直接调用一次监听的属性所绑定的函数
          deep:true//是否开启深度监视，
          handler(新的值,旧的值){//handler回调函数名是固定写法
            ...
          }
        }
      }
     
      第一种方法简写：
        watch:{
          需要监听的数据(newValue,oldValue){
            ...
          } 
        }

    2.Vue实例对象的实例方法的监听器
      完整写法
      Vue实例.$watch("监听的属性",{
        。。一些配置,
        handler(newValue,oldValue){
        }
      })
      简写
      Vue实例.$watch("监听的属性",function(newValue,oldValue){
        方法体
      })

      监听的属性发生改变就会执行回调函数
      注意：Vue所管理的函数，都不能写成箭头函数，
      Vue管理的函数：methods中定义的函数，计算属性，监听器中的函数、
# 深度监视
  开启深度监视，开启后一旦一个对象中的某一个属性值发生变化，就会调用handler函数
  写法：
    watch: {
        // 检测对象中的某个属性的改变
        "number.a": {
          deep: true
          handler() {
            console.log("a的值发生变化");
          }
        },
        // 监听对象中所有的属性值变化，需要开启deep=true深度监视
        "number": {
          deep: true,//开启深度监视，开启后一旦一个对象中的某一个属性值发生变化，就会调用handler函数
          handler() {
            console.log("number里面的属性值发生变化");
          }
        }
      }
# :key的作用与原理
  面试题：react、vue中的key有什么作用？（key的内部原理）
    key会绑定在虚拟DOM上
    1. 虚拟DOM中key的作用：
      key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】, 
      随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下：
    2.Diff算法对比规则：
    diff算法大致做法是比较old VDOM树和new VDOM树之间的差异，根据差异更新虚拟DOM树。
      (1).旧虚拟DOM中找到了与新虚拟DOM相同的key：
        ①.若虚拟DOM中内容没变, 直接使用之前的真实DOM！
        ②.若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM。

      (2).旧虚拟DOM中未找到与新虚拟DOM相同的key
          创建新的真实DOM，随后渲染到到页面。
                
    3. 用index作为key可能会引发的问题：
      1. 若对数据进行：逆序添加、逆序删除等破坏顺序操作:
        会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。

      2. 如果结构中还包含输入类的DOM：
        会产生错误DOM更新 ==> 界面有问题。

    4. 开发中如何选择key?:
        1.最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。
        2.如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，
          使用index作为key是没有问题的。


    5. key的作用：
      1.主要用在 Vue 的虚拟 DOM 算法，在新旧 DOM 对比时辨识 新的VDOM，相当于唯一标识ID。
      2.使 Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染， 因此使用key值可以提高渲染效率，
      同理，改变某一元素的key值会使该元素重新被渲染。
    
    6.如果不设置key，vue会默认的将index设置为key

# Vue数据响应式
  给vue添加响应式的数据：数据一添加，页面就会发生变化
      响应式的给vue中的data中的 对象 添加属性
      Vue.set(vm.字段,key,value)==》只有这样添加的才是响应式的数据
      Vue实例对象.$set(vm.字段,key,value)==》只有这样添加的才是响应式的数据
      直接通过 Vue实例对象.对象.属性="值"这种方式添加的数据是不具有响应式的

# Vue收集表单数据
  v-model默认收集的是表单元素的value值
    但是有一些输入类的元素没有明显的value值，如单选，多选框
    
    收集表单数据：
      若：<input type="text"/>，则v-model收集的是value值，用户输入的就是value值。
      若：<input type="radio"/>，则v-model收集的是value值，且要给标签配置value值。
      若：<input type="checkbox"/>
          1.没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值）
          2.配置input的value属性:
              (1)v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）
              (2)v-model的初始值是数组，那么收集的的就是value组成的数组
      备注：v-model的三个修饰符：
              lazy：失去焦点再收集数据
              number：输入字符串转为有效的数字
              trim：输入首尾空格过滤

# Vue内置指令大全
    v-bind: 单向绑定解析表达式, 可简写为 :xxx
    v-model: 双向数据绑定
    v-for: 遍历数组/对象/字符串
    v-on: 绑定事件监听, 可简写为@
    v-if: 条件渲染（动态控制节点是否存存在）
    v-else: 条件渲染（动态控制节点是否存存在）
    v-show: 条件渲染 (动态控制节点是否展示)
    v-text指令：
      1.作用：向其所在的节点中渲染文本内容。
      2.与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会。
    v-html指令：
      1.作用：向指定节点中渲染包含html结构的内容。
      2.与插值语法的区别：
        (1).v-html会替换掉节点中所有的内容，{{xx}}则不会。
        (2).v-html可以识别html结构。
      3.严重注意：v-html有安全性问题！！！！
        (1).在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。
        (2).一定要在可信的内容上使用v-html，永不要用在用户提交的内容上！
    v-cloak指令（没有值）：
        1.本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性。
        2.使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题。
    v-once指令：
        1.v-once所在节点在初次动态渲染后，就视为静态内容了。
        2.以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。
    v-pre指令：
        1.跳过其所在节点的编译过程。
        2.可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译
        3.元素加上v-pre指令后，不会参与vue的编译，直接会被放到页面上进行展示
# 混入

  混入：https://www.cnblogs.com/dengyao-blogs/p/11589962.html

  定义混入
    在当前项目scr目录下，创建minix目录，然后传递混入的js文件，js文件中定义所有

  混入的作用：
   将多个组件中公共的部分,抽取出来,成为一个混入对象,从而简化代码,代码复用
    混入对象的数据解构与组件基本一致
    mixin混入对象的变量是不会共享的

  注意：
    如果组件中定义了data或者methods方法，组件中的data和methods就会覆盖掉混入中的data和methods方法
      但是混入中的生命周期函数，组件对象是覆盖不掉的，所以如果组件和混入中都定义的生命周期函数，那么这个生命周期函数就会执行两遍

    混入对象中可以写哪些内容？
      只要组件.vue中的所有的属性和方法都可以写道混入对象中
    
  局部混入：在组件中引入混入，只有引入了mixin的混入对象才可以使用，并且只有在引入了mixin混入对象的组件中才生效；

    在需要的组件中引入mixin
      import xxx from "./mixin/globalMixin"
    然后注册和使用：
      //这里注意：属性名为mixins，值为数组类型
      mixins: [myMixin], //相当于注册,然后就可以直接使用混入对象中的数据

  全局混入：全局混入我们只需要把mixin.js引入到main.js中，然后将mixin放入到Vue。mixin()方法中即可；
    全局混入更为便捷，我们将不用在子组件声明，全局混入将会影响每一个组件的实例，
    使用的时候需要小心谨慎；这样全局混入之后，我们可以直接在组件中通过this.变量/方法来调用mixin混入对象的变量/方法；

    // 引入全局的混入 main.js
      import { globalMixin } from "./mixin/globalMixin"
    全局注册混入
      Vue.mixin(globalMixin)

    然后直接可以再所有的组件中使用到混入对象中的数据，通过this.的方式,所有的数据都直接混入到所有的组件中


  mixin混入对象和Vuex的区别：
    Vuex是状态共享管理，所以Vuex中的所有变量和方法都是可以读取和更改并相互影响的；
    mixin可以定义公用的变量或方法，但是mixin中的数据是不共享的，也就是每个组件中的mixin实例都是不一样的，都是单独存在的个体，不存在相互影响的；
    mixin混入对象值为函数的同名函数选项将会进行递归合并为数组，两个函数都会执行，只不过先执行mixin中的同名函数；
    mixin混入对象值为对象的同名对象将会进行替换，都优先执行组件内的同名对象，也就是组件内的同名对象将mixin混入对象的同名对象进行覆盖；


## 插件
  插件通常用来为 Vue 添加全局功能。插件的功能范围没有严格的限制——一般有下面几种：
    添加全局方法或者 property。如：vue-custom-element
    添加全局资源：指令/过滤器/过渡等。如 vue-touch
    通过全局混入来添加一些组件选项。如 vue-router
    添加 Vue 实例方法，通过把它们添加到 Vue.prototype 上实现。
    一个库，提供自己的 API，同时提供上面提到的一个或多个功能。如 vue-router

  使用插件步骤:
    1.先创建插件文件
      在src目录下创建xxx.js文件
      然后再js文件中,暴露一个对象,对象必须要有install方法
      plugin.js
        const pluginObj = {
          // 插件必须要有install方法,这个方法由Vue来进行调用
          install(Vue,【参数列表】) {//install默认接收参数Vue构造函数
            console.log("install", Vue);

            在install方法内部可以既然用Vue进行一些全局的操作
            定义全局过滤器
              Vue.filter("过滤器名称",function(value){

              })
            定义全局混入
              Vue.mixin({
                ....
              })
            给Vue原型上添加上一个方法或者属性
              Vue.prototype.xxxx=function(){}
              Vue.prototype.xxx="xxx"
            定义全局指令
              Vue.directive("指令名称",{

              })
          },
        }
        export default pluginObj
    2.在main.js入口文件中使用插件
      1.先引入插件
        import xxx from "./插件路径"
      2.使用插件
        Vue.use(xxx,【参数列表】)

# 组件的自定义事件:
  vue中的内置事件(click,keyup...)是给html元素使用的
  组件的自定义事件是给组件使用的,会绑定到子组件VueComponent对象身上
    组件实例对象.$on()=>绑定自定义事件
    组件实例对象.$emit()=>触发自定义事件
    组件实例对象.$off()=>解绑自定义事件
    组件实例对象.$once()=>触发一次自定义事件


  绑定事件:
  方式1:
    在父组件中,引入了子组件
      <子组件 @自定义事件名称="父组件中的对应的事件处理函数"></子组件>
        注意:这个自定义事件是绑定在子组件对象上
    在子组件中,触发自定义事件,此时就可以向父组件传递数据
      通过this.$emit("自定义事件名称",[参数列表]) ===>从而去父组件中触发自定义事件绑定的函数

  方式2: 这种方式更加灵活
    父组件中
     <子组件 ref="xxx"></子组件> 通过ref来获取到子组件实例对象this.$refs.xxx=>获取的是子组件的实例对象
     绑定事件:
      子组件实例对象.$on("自定义事件名称",父组件的事件处理函数) 

      注意点:
        如果事件处理函数是普通函数,那么谁触发自定义事件,那么父组件的事件处理函数中的this指向的就是谁
        如果事件处理函数是箭头函数,那么事件处理函数中this就是父组件中的this

        如果给组件标签直接绑定vue内置事件,那么vue会将内置事件,当成自定义事件
        <组件 @click="事件处理函数"></组件> ==>组件会吧click当成自定义事件
        <组件 @click.native="事件处理函数"></组件> ==>此时才会把click内置事件绑定给组件内部的根元素


  解绑事件:
    解绑组件上的一个自定义事件
      组件实例对象.$off("自定义事件名称")
    解绑组件上的多个自定义事件
      组件实例对象.$off(["自定义事件名称1","自定义事件名称2",...])
    解绑组件上的所有的自定义事件
      组件实例对象.$off()


    


# 全局事件总线:可以实现任意组件间的通信