Vue 基础概念学习

Vue 核心概念

注入

配置对象中的部分内容会被提取到 vue 实例当中，即 data 属性和 methods 属性 ，该过程称为注入。

注入的目的有两个：

• 完成数据响应式；
  vue 如何得知数据被更改了？vue2.0 通过 Object.defineProperty() 实现数据响应式更改。vue3.0通过Class Proxy 完成的数据响应式。

• 绑定 this ；

  var vm = new Vue({
       
  	el:"#app" // css选择器
  	data: {
       
  		title:"vue";
  	}
  	methods:{
       
  		print(){
       
  			console.log(this.title) // this 指向的是vm
  		}
  	}
  });
  

虚拟 DOM 树

为了提高渲染效率，vue 会把模板编译称为虚拟 DOM 树，虚拟 DOM 树本质是由 JS 对象生成的树形结构，然后再生成真实 DOM 。直接操作真实 DOM 树会十分影响渲染效率，而操作 JS 对象的成本则大大减小。

[外链图片转存中…(img-iuHEkVbm-1666583975833)]

// 能够通过 VUE 的内置属性检查到虚拟节点
vm._vnode

// by the way
// $**** 提供的方法是可供开发者使用的
// _**** 提供的方法一般是内部使用的方法，不建议开发者使用

当数据更改时，将重新编译成虚拟 DOM 树，然后将前后两棵虚拟 DOM 树进行对比，仅仅将差异部分反映到真实 DOM 上，这样能够最小程度改动真实 DOM ，提升页面的渲染效率。

let v1 = vm._vnode;
vm.title = "alex";
let v2 = vm._vnode;
v1 === v2;
// false
// 因为每次改动虚拟 dom 树种的节点，都将生成一棵全新的虚拟 dom 树
v1.elm = v2.elm;
// true
// elm 代表的是真实 dom 树，两者指向的是同一棵且唯一一棵真实 dom 树，因此相等

因此，对于 vue 而言，提升效率重点着眼于两个方面：

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

虚拟 dom 树是根据模板生成的，vue 提供了多种方式生成虚拟 DOM 树：

1. 在挂载的元素内部直接书写，此时将使用元素的 outerHTML 作为模板；

   <div id="app">
   </div>
   
   <script>
     vm = new VUE({
          
       el: "#app",
     })
     // 将 document.querySelector("app").outerHTML 作为模板
     // 然后根据模板生成虚拟 dom 树，模板存在的目的就是为了生成虚拟 dom 树
   </script>
   

2. 在 template 配置中书写；

   <script>
     vm = new VUE({
          
       el: "#app",
     	template: `<div id="app"></div>`
     });
   </script>
   

3. 在 render 配置中用函数直接创建虚拟节点树，此时完全脱离模板，将省略编译步骤；

   <script>
     vm = new VUE({
          
       el: "#app",
       // 在 render 配置中用函数直接创建虚拟节点树
       // 该方法为最本质创建虚拟节点的方法，模板生成 dom 树也是根据该方法生成的
     	render(h){
          
         return h("div", [
           h("h1", "hello");
           h("p", "alex");
         ]);
       } 
     });
   </script>
   

这些步骤从上到下，优先级逐渐提升。注：虚拟节点树必须是单根的。换句话说，模板也只能有一个根节点。

挂载

将生成的真实 DOM 树，放置到某个特定元素位置，称之为挂载。

挂载方式有以下两种：

• 通过 el:"css选择器" 进行配置；

  <div id="app">
  </div>
  
  <script>
    // 将 vue 生成的真实 dom 树挂载到 id=app 的位置
    vm = new VUE({
         
      el: "#app",
    });
  </script>
  

• 通过 vue实例.$mount("css选择器") 进行配置。

<div id="app">
</div>

<script