vue的一些常用指令

响应式：

利用Object.defineProperty实现数据劫持

1. vue中哪种情况下页面不会渲染数据？

   1. 未经过声明的
   2. 声明，但未在DOM中使用的 <渲染页面，操作DOM 非常消耗性能>

2. 更改数据后，页面会立刻重新渲染吗？

   1. 不会。页面渲染的操作是异步执行的
   2. 在虚拟DOM中渲染的

3. 如果想要拿到渲染过后的DOM元素，使用vm.$nextTick() / Vue.nextTick()

4. vue当中的一些缺点

   1. 会一直等待主线程上的任务执行完毕，才会渲染,还有可能出现卡死状态

5. 更改数组：

   1. 变异方法：push、pop、shift、unshift、splice、sort、reverse (跟正常数组使用方法一样)；
   2. vm.$set(要改谁，index，改成啥) 或Vue.set(要改谁，index，改成啥);
   3. vm.$delete(要删除谁的值，删除的下标)

6. 对象：

   1. vm.$set(要改谁，index，改成啥) 或Vue.set(要改谁，index，改成啥);
   2. vm.$delete(要删除谁的值，删除的下标)

vue指令：

1. v-pre <不常用>

   1. 跳过元素和它的子元素的编译过程
   2. 好处：跳过没有指令的节点，加快编译

2. v-cloak <不常用>

   • 作用：解决闪烁的问题

3. v-once <不常用>

   • 作用：只渲染一次
   • 好处：可优化性能

4. v-text

   • 更新元素的textContent 等同于innerText

   • 类似插值表达式{{ }},有一点区别：v-text会替换元素中所有的文本；差指表达式只替换自己的

   • v-text 优先级高于 {{ }}

   • textContent 与 innerText的区别：

     • 获取所有元素，innerText 不获取所有元素
     • innerText受css影响，不获取隐藏元素的文本
     • innerText触发重排

5. v-html

   1. 更新元素的innerHTML
   2. 在可信的内容上使用V-html , 不用用户提价的内容

6. v-if 条件不成立显示-> v-else-if 条件不成立显示-> else

   1. 根据条件(真值就显示，假值就不显示)，判断是否要展示某一个元素

7. v-show

   • 与v-if的不同点：

     1. v-if是将元素彻底移除，元素不存在在页面上； v-show将元素设置为display：none;
     2. v-if 支持template， v-show 不支持template
     3. v-show 不支持v-esle 和 v-else-if
     4. v-if有更高的切换开销，v-show有更高的初始化渲染开销，
        v-if与v-show详解

     第六条和第七条有称作条件渲染

8. v-bind

   1. 动态的绑定一个或多个
   2. 修饰符
      1. camel：解决自动转换小写
      2. prop：用于绑定dom属性的
      3. sync：

9. v-on

   1. 绑定事件

10. v-for

    1. 列表渲染
    2. 遍历对象的时候有三个值，(value , key , index)
    3. 遍历数组的时候有两个值
    4. 便利数字 value in number
    5. 可以便利字符串 string in strings

11. v-model

    1. 可以在表单元素上创建双向数据绑定(也是一个语法糖)
    2. 只能在下面几个属性上面使用
       1. input
          1. 实际上是监听了input框里面的oninput事件，并且绑定value
          2. v-model在input框中等同于@input=“msg=$event.target.value” :value=‘msg’
       2. teaxtarea
       3. select
       4. 组件

计算属性

1. 计算属性是vue配置对象上面的属性

2. 计算属性跟方法一样都需要放到一个对象里面

   1. computed:{
      //计算属性里面都是key:value的形式
          eg:
          someComputed:function(){
              return "xxx"；  //需要在这个函数中返回一个值；
          }
      }
      

3. 计算属性最终运行的是返回的值

4. 调用计算属性的时候不加括号，不是函数，不能运行

计算属性与方法的区别

1. 计算属性会缓存，方法methods会多次调用
2. 方法是只要页面渲染就执行，而计算属性是只有它依赖的数据改变了才会执行
3. 最本质的区别：计算属性是基于响应式依赖进行缓存的
   1. 为什么需要缓存，因为节省了性能开销
4. 对任何复杂的逻辑，都应该使用计算属性

将计算属性拆开成对象类型

1. 对象里面有getter(读取)和setter(设置)两个方法

2. 分别对应两个函数get() {读取时执行的函数}和set () {对des重新设置值的时候执行}

   1. des:{
          get(){
              console.log('get执行了');
              return `姓名${this.name},年龄${this.age}`
          },
          set(value){
              console.log('set执行了',value)  //value可以获取更改后的值
              return `姓名${this.name},年龄${this.age}`
          }
      }
      

3. get就相当于写的一个普通的函数

谢谢访问！

持续更新…