框架学习之VUE （一） （关键字：速写模版字符串 注入 虚拟DOM树diff算法 ）利用实际做b站频道组件的开发过程，深度理解vue

写这份vue教程的初心： 1）可以将自己的理解比较精炼的总结出来，有助于自己的理解 2）市面上的资料层次不齐，我想出优质的内容，可以开源给所有人 3）另外视频教程请前往b站或者知乎 搜索 我是付小白 查看 4） 非常感谢大家支持 我们一起成长！ 5) 利用实际做b站频道组件的开发过程，深度理解vue

1 核心 解决复杂的DOM操作

特点 是什么 渐进式 一部分用VUE 其他也可以不用 组件化 每个人开发一块内容 响应式

2 应用场景 前台页面 用户看到的 前台部分需要VUE 中后台页面 中间人看到的 后台界面 大量的后台需要 VUE开发

3 当前主流版本 2.xxxxx 可以兼容很久 终端设备和人交互都会使用前端技术 手机电脑 冰箱 车载。。。。 就业主要学习 vue react

4 简单理解 MVVM 模式 module(数据)---view(界面)----view model(vue)

5 举例子说明一下这个

1、es 6 速写属性

这里我遇到了一个问题 我的mac 无法打开 code run （需要先安装 node.js + code run） 怎么解决？

1-1 常规代码如下

// 这个代码为了说明es6 速写属性 var name = 'px'; var age = 18; var person = { name: name, age: age, } console.log(person);

结果是这样的 1-2 速写指的是 简化的表达 实现的结果是一样的 属性名和属性值都用 一个变量代替

// 这个代码为了说明es6 速写属性 var name = "px"; var age = 18; var person = { name, age, }; console.log(person);

2 速写方法

1-1 常规写法

var person = { name: "小白", age: 18, sayHello: function () { console.log("hello"); }, }; // 执行这个方法 person.sayHello();

实现结果 打印 hello

1-2 速写方法 省略掉 : 和 function 结果是一样的

3 模版字符串

解决的是字符串拼接和 字符串换行的问题

3-1 \n 用来换行

var person = { name: "text", age: 18, }; var str1 = "my name is " + person.name + "\nmy age is " + person.age; console.log(str1);

结果是怎样的 ？ 3-2 模版字符串写法 输出的结果是一样的 更加的清晰

var person = { name: "text", age: 18, }; var str2 = `my name is ${person.name} my age is ${person.age}`; console.log(str2);

注入 和 Dom虚拟树 占了 VUE 里面 60% 的内容 是面试必考的内容

为什么？ 源码内容 以及 应用场景才是 拉开差距的关键 代码配置重要 但是 只是基础 不是技术亮点

4 注入

4-1

4-2

需要知道两件事情 第1个是两个方法是什么意思？ 1）Object.defineProperty 方法 具体的可以点击跳转

//基本的写法 Object.defineProperty(obj, prop, descriptor)

2）Class Proxy 方法

4-3 第2个是两个方法的区别， 1）vue 3.0 的class proxy 方法 效率更高

4-4 以及为什么会使用 class proxy ？ 前面一种有什么缺陷 ？ Object defineProperty 方法 缺陷： 1）无法感知到新增加（添加）的属性 可新增 但是 在页面无法刷新显示出来 2） 无法感知删除的属性 无法在页面刷新展示出来 3）不能监听数组的变化

5 虚拟dom 树

vm_vnode 这个东西

为什么可以提高渲染效率？

6 完整流程

7 diff 算法 很重要

单独更新一篇内容写这个东西