vue知识点汇总（持续更新）

本文链接： https://blog.csdn.net/qq_40816649/article/details/102562158

最近有时间于是去翻阅了一下vue的源码，了解了很多vue实现的一些原理性的东西，包括vue源码整个架构从入口持续拆分到每个相应的方法实现都封装成对应的单个文件进行单独的引入使用；vue的双向绑定响应式原理的实现等等。
在阅读源码的过程中会了解到许多日常开发中没有注意到的东西包括某些代码为什么会报错的问题，虽然不能完全读懂vue的源码，但是阅读源码对于往后开发过程中碰到的问题能更快的定位提高开发效率。
下面是一些日常开发中比较少碰到的但是还是蛮有用的一些vue相关的知识。
1.nextTIck
适用于在获取到数据后需要获取到数据后需要在数据更新视图之后进行的一些操作。

this.$nextTick(() => {
        console.log(this.obj)
        //为了在数据变化之后等待 Vue 完成更新 DOM 
        //可以在数据变化之后立即使用 Vue.nextTick(callback)
        //这样回调在 DOM 更新完成后就会调用
        console.log(123456789);
        
      });

2.set
主要用于添加响应式的data数据，在vue中不能直接用this.list[6]=2345这样的方式修改data中的数据这样的方式vue不能添加响应式对象。需要通过vue提供的set方法来实现。

data() {
    
    return {
      list: [1,2,24,5,6,7,8]
    };
  },
mounted() {
    this.list[6] = 1234567//不能更新视图
    this.$set(this.list,6,234567)//能更新视图
  }

3.watch深层监听
watch的函数不能使用箭头函数因为使用箭头函数this不会指向vue

data() {
    return {
      obj: {a: 1}
    };
  },  
  mounted() {
    this.obj.a = 23456
  },
  watch: {
    obj: {//高级写法
      deep: true,//遍历监听否则只会监听obj的变化
      handler() {
        console.log(123456)
      }
    }
  }
  //watch: {
    //obj() {//普通写法
      //console.log(1234567890)
    //}
  //}

vue知识点汇总（持续更新）

猜你喜欢