vue this属性批量赋值_由 Vue 中三个常见问题引发的深度思考

前言

工作中我们通过搜索引擎或者官方文档很容易就会知道一个语法怎么使用，但是你知道其中的原理吗？我想有一部分同学应该做不到清楚的说明其实现原理。众所周知，如今技术更新迭代速度很快，据 Vue 作者尤雨溪表示 Vue3.x 在今年的下半年发布正式版本，视频地址在这里 VUE CONF 杭州之 3.0 进展 。如果你在使用 Vue 或者正在学习 Vue，那么我建议你观看一遍完整的视频，这可能对你以后接触 3.0 版本有很大帮助。这篇文章是基于 Vue2.x 的版本讲述的。主要是围绕以下三个问题展开讨论。

为什么 data 要写成函数，而不允许写成对象？
Vue 中常说的数据劫持到底是什么？
Vue 实例中数组改变 length 或下标直接赋值什么不能更新视图？

Tips

如果你已经掌握了这三个问题的原因和原理；
如果你觉得你不需要掌握原理会用即可；
抖个机灵——请看本文最后一行。

接下来，我们就对这三个问题一一解答。

问题一

为什么 `data` 要写成函数，而不允许写成对象？

想要理解这个问题，我们首先要知道以下三点。

注意要点

data是 Vue 实例上的一个属性。2. 对象是对于内存地址的引用。3. 函数有自己的作用域空间。

第一点无可厚非，data属性附着于 Vue 实例上。

第二点，JS 的数据类型分为基本类型和引用类型，基本类型存储在栈内存中，引用类型存储在堆内存中，并且引用类型指向的是栈内存中的堆区地址。下面两个例子可以帮助你清晰地理解这句话。

基本类型赋值

var a = 10;
var b = 10;
var c = a;

console.log(a === b); // true

a ++ ;

console.log(a); // 11
console.log(c); // 10

这段代码分别给 a、b 赋值 10，a 和 b 是全等的。然后用 a 来初始化 c，那么 c 的值也是 10。但 c 中的 10 与 a 中的是完全独立的，该值只是 a 中的值的一个副本，此后， 这两个变量可以参加任何操作而相互不受影响。具体位置如下示意图。

引用类型赋值

var a = {};
var b = {};
var c = a;

console.log(a === b); // false

a.name = 'Marry';
a.say = () => console.log('Hi Marry!');

console.log(c.name); // 'Marry'
consol