vue基础用法

vue基础用法

理论

1: 简单聊聊对于MVVM的理解？

• 1. 发展史以及旁支
     a. 语义化模版阶段
     b. MVC - model view controller
     c. MVVM - model view viewModel
     i. 数据会绑定在vm层并自动将数据渲染到页面中
     ii. 视图发生变化时，会通知viewModel层进行更新数据

写法

vue是如何利用mvvm思想进行项目开发

数据双向绑定
a. 利用花括号，构筑了数据与视图的双向绑定 —— 分类转译
b. 通过视图绑定事件，来处理数据

生命周期

2: vue生命周期

beforeCreate => created => beforeMount => mounted
=> beforeUpdate => updated (循环)
=> beforeDestroy => destroyed

bC: new Vue() - 实例挂载
c: data | props | method | computed - 数据操作

bM: vDom - 读取虚拟节点
m: Dom - dom任何操作

bU: vDom 更新了 - 数据更新
u: dom完成节点更新 - 谨慎操作数据

bD: 实例尚未被销毁 - 清理回收eventBus ｜ ls ｜ 计时器
d: 实例销毁

定向监听

computed => 面向新变量
watch => 面向老变量

3: 你对于computed和watch的区别有何理解？

相同点：

1. 基于vue的依赖收集机制
2. 都是被依赖的变化触发，进行改变进而进行处理计算

不同点：

1. 入和出 => 逻辑思路顺序
   computed: 多入单出 —— 多个值的变化，组成一个值的变化
   watch: 单入单出 —— 单个值的变化，进而影响一系列的状态变更

2. 性能
   computed: 会自动diff依赖，依赖如果没有变化，则直接缓存读值
   watch: 稳定支持监听

3. 写法上
   computed: 必须有return
   watch: 不一定

4. 时机上
   computed: 从首次加载生成，就开始计算了
   watch: 首次不会运行，immediate: true

模版

模版编译原理 template => dom

template => 匹配模版语法 —— 生成AST：静态 + 动态 => 转换AST成可执行方法 => render() => dom

vue3

vue3兼容性

平顺切换

1. 模版类型兼容
2. 变量
3. 切换点：组合式api方式

需要调整的点

1. 需要做处理 v-for v-if
   在vue2中，一个元素上同时使用v-if v-for，v-for优先作用
   在vue3中，v-if总是优先生效

2. 数据上
   vue2 对象响应是可传递的
   vue3 响应式对象始终通过挂载实例来获取

3. 模版上
   vue2 统一根模版
   vue3 平铺支持碎片化

4. 方法书写上
   vue2 熟练到methods、computed、watch各种对象配置中
   vue3 直接以钩子形式进行调用即可