Vue数据响应式

老老老老李

已于 2022-05-12 12:30:36 修改

阅读量1.7k

点赞数 1

文章标签： Vue数据响应式深入options.data

于 2022-04-01 07:08:33 首次发布

本文链接：https://blog.csdn.net/baidulixueqin/article/details/123888356

版权

本文深入探讨Vue数据响应式原理，解释Vue如何通过Object.defineProperty()为data添加getter和setter实现数据监听与UI更新。同时，文章讨论了Vue中数据响应式的潜在问题，如新增属性未声明导致的警告，以及如何使用Vue.set或this.$set解决。此外，还介绍了Vue对数组变异方法的处理，确保数组变化时UI同步更新。

摘要由CSDN通过智能技术生成

数据响应式

主要原理:深入响应式原理
内容:深入理解options.data

Vue对data做了什么？

const myData = {
   
  n: 0
};
console.log(myData); 

new Vue({
   
  data: myData,
  template: `
    <div>{
    {n}}</div>
  `
}).$mount("#app");

setTimeout(() => {
   
  myData.n += 10;
  console.log(myData); 
}, 3000);

3s后n变成10，这次没有在vm里面加，而是在外面，说明在外面也可以变更myData。

一般我们是在vm内变更myData的

new Vue({
   
  template:`
  <div>
    {
    {n}}
    <button @click="add"> +1 </button>
  </div>
  `,
  methods:{
   
    add(){
   
    //this.n +=10
      myData.n +=10
    }
  }
}).$mount("#app")

平常我们都用this.n，今天试试myData.n。
分别打印出myData刚声明和3s后的结果，如果第1次是n:0,那第2次就应该是n:10，看下结果:
在这里插入图片描述

第2次并不是n:10，那这个n:(...)是什么呢？
我们需要先学习ES6的getter、setter
实例:要想得到姓名就要调用函数obj1.姓名()所以括号不能省，但是ES6的get语法可以实现obj1.姓名删掉括号。

// 需求一，姓名不要括号也能得出值
let obj1 = {
   
  姓: "高",
  名: "圆圆",
  get 姓名() {
    //以函数的形式定义的属性
    return this.姓 + this.名; 
  }
};
console.log("需求一：" + obj1.姓名);
// 总结:getter就是不加括号的函数而已。

// 需求二：姓名可以被写
let obj2 = {
   
  姓: "高",
  名: "圆圆",
  get 姓名() {
   
    return this.姓 + this.名;
  },
  set 姓名(xxx){
   
    this.姓 = xxx[0]
    this.名 = xxx.substring(