vue知识点汇总(持续更新)

最近有时间于是去翻阅了一下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)
    //}
  //}

 

评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值