vue知识汇总

vue知识汇总

# 插值

{{}}    变量   表达式   三元  链接且/或    函数

# 指令

v-text  文本插入

v-html   解析标签

v-once    渲染一次  mvvm

v-clock   解决插值的闪屏问题

常用

v-bind   动态属性<a :href='href'>{href:'http://baidu.com'}

v-on      事件绑定  <button @click='changefun'>

        修饰符：once self stop prevent

        事件对象：event vue的事件对象就是原生的事件对象

v-model   双向数据绑定  只用于表单

v-for   循环  

        数组循环    v-for="(item,index) in arr" :key="index"    //diff算法  item.id和index有啥区别？深度面试题

        对象循环   v-for="(val,key,index)in obj" :key="index"

v-if    注意：先判断再决定要不要渲染dom节点，true节点渲染，false节点不渲染

v-show   注意：节点无条件渲染，v-show空值当前节点要不要显示，true显示，false是通过css隐藏

频繁切换   用v-show

不频繁切换  用v-if

# 自定义指令   （用两个案例说明的，记住这两个案例）

   全局指令

   Vue.directive(‘color’，{//v-color

        inserted：(el)=>{//inserted或者update

             el.style.color='red'

        }

   })

   局部指令：

     directives：{

          'color':{

               inserted:(el)=>{

                    el.style.color='red'

               }

          }

     }

# computed  计算属性  提高性能方式之一

  1.data的数据的改变，页面会重新渲染，刷新页面

  2.computed  派生数据，也是数据

  3.缓存，只要依赖的数据变量不改变，从第二次起获取的都是缓存中的结果值    （数据是函数的数据）

  4.依赖性：他依赖的数据变量发生改变，此函数重新执行

# watch 监听   （监听数据的，得有数据才能监听）

监听字符串：

     watch：{

          msg:()=>{},

          msg:{

               'handelr':'changfun',

               'immediate':true  //首次执行

          }

     }

监听对象

     watch：{

          obj：{

          'handler':'changefun',

          'deeo':true,   //深度监听，  默认是浅监听

          'immediate'：true  //首次执行

     }

     }

# filter 过滤器

全局过滤器

     Vue.filter(过滤器名，(val)=>{

        return val处理逻辑

   })

局部过滤器

     filters{

     过滤器名：(val)=>{

          return val处理逻辑

     }

}

# 生命周期  声明周期钩子

请说一下vue的声明周期？   必会

创建

   beforeCreat  创建前

   created      创建后

   beforeMounte  挂载前

   mounted       挂载后  重要：发送网络请求，闪屏

更新

   beforeUpdate    更新前

   updated         更新后

销毁

   beforeDestory  销毁前

   destoryed       销毁后

# 理论：

# 一个问题，vue的渲染过程？深度理论面试

   vue只是一个框架，最终都要生成html页面。

   1.拿到data数据，变成get set 监听形式。监听形式@object.defunction

   2.传入数据，生成vdom，vue的render函数要做的事

   3.vdom变成真实的dom元素，vue有patch函数。 变成了一个dom片段

   

# 另一问题，vue的更新过程？

1.触发data中的监听的set方法。

2.vue的render要做的事。传入数据。生成一个新的vdom

3.vue的patch函数，传入的参数  一个叫旧vdom和新的v-dom

  函数中的diff对比，多的删除， 少的创建，挂载真实的dom上