vue核心概念

核心概念

ES6简单知识

速写属性

es6语法糖：

var name = 'lhn';
var age = 18;
var person = {
    name : name,
    age = age,
};

可以写成

var name = 'lhn';
var age = 18;
var person = {
    name,
    age,
};

---

速写方法

es6语法糖：

var person = {
    name : 'lhn',
    age : 18,
    sayHello : function () {
        console.log('你好');
    },
};

写成

var person = {
    name : 'lhn',
    age : 18,
    sayHello() {
        console.log('你好');
    },
};

---

模板字符串

var person = {
    name : 'lhn',
    age : 18,
};
var str1 = "My name is " + person.name + "\nMy age is " + person.age;
console.log(str1);

改写成

var person = {
    name : 'lhn',
    age : 18,
};
var str1 = "My name is " + person.name + "\nMy age is " + person.age;
var str2 = `My name is ${person.name}
My age is ${person.name}`;
console.log(str1);
console.log(str2);

注入

配置对象中的部分内容会被提取到vue实例中：

• data
• methods

该过程称之为注入

注入的目的有两个：

• 完成数据响应式
  vue是怎么知道数据被更改了？
  vue2.0是通过 Object.defineProperty方法完成了数据响应式（此方法有一定的缺陷，无法感知新增和删除的数据变动）
  vue3.0是通过Class Proxy(es6)完成的数据响应式
• 绑定this

虚拟DOM树

为了提高渲染效率，vue会把模板编译成虚拟DOM树，然后在生成真实而DOM

当数据修改时，将重新编译成虚拟DOM树，然后对前后两棵树进行对比，仅将差异部分反应到真实DOM,这样既可小程度的改动真实DOM,提升页面效率

两个虚拟DOM树相对应节点互不相等，真实节点是相等的。目的是通过这种方法减少真实的DOM的改动
因此，对于vue而言提升效率重点着眼于两个方面：

• 减少新的虚拟DOM的生成
• 保证对比之后，只有必要的节点变化

vue提供了多种方式生成虚拟DOM树：

1. 在元素内部直接书写，此时将使用元素的outHTML作为模板
2. 在template配置中书写
3. 在rander配置中用函数直接创建虚拟节点树，此时，完全脱离模板，将省略编译步骤

这些步骤从上到下，优先级逐渐提升
注意：虚拟节点树必须是单根的
（diff算法决定只能有两棵树作对比，多余的模板无效果）

挂载

将生成的真实DOM树，放置到某个元素位置，称之为挂载
挂载的方式：

1. 通过el : "css选择器"进行配置
2. 通过vue实例.$mount("css选择器")进行配置

完整流程