生命周期
链接
8个生命周期
- beforecreate：数据和方法都不能被访问
- created：获取一些数据
- beforemount：虚拟Dom创建完成
- mount：Dom挂载完成，操作Dom（$refs）
- beforeupdate：虚拟Dom重新渲染之前，可以更改数据而不被重新渲染
- update：数据更新完成了
- beforedestroy：做一些收尾工作
- destroyed：组件拆除，数据销毁
作用
有多个事件钩子，让我们控制Vue实例过程更加清晰
第一次页面加载
会触发前4个钩子事件
MVVM
model-view-viewmodel，开发者只需要关注数据model层面的信息，不需要去关注操作DOM，关心dom怎么样变化，vue这个框架会自动在view（视图层）展现这种变化。
v-if和v-show
keep-alive
切换组件会被保存在缓存中，而不是被创建和销毁。actived和deactived,include和exclude。
V-model
本质是value和input的语法糖
router和route
router是路由实例对象，包含了跳转和钩子函数等
route是路由信息对象，包含了path,query等路由信息参数
vuex
vuex
vue框架的状态管理
属性：state，getter，action。mutation，module
响应式原理
数据劫持
用 Object.defineProperty重新设置对象中的属性达到目的
let obj = { name: 'zxx', age: 25 } // console.log(Object.keys(obj)); //返回键名组成的数组['name','age'] Object.keys(obj).forEach(key => { let value = obj[key] Object.defineProperty(obj, key, { get() { console.log("查看了get"); return value }, set(newValue) { value = newValue console.log('修改了set'); } }) })
发布订阅者
class Dep { constructor() { subs = [] } //在get下面调用 addSub(watcher) { this.subs.push(watcher) } //在set下面调用 notify() { this.subs.forEach(item => item.update()) } } class Watch { constructor() { } update() { console.log('进行数据更新'); } } //Foreach开始执行new dep() //get函数下面执行生成new watch()与addSub(watcher)
文字部分
Observer会把所有data的属性进行数据劫持/数据代理，compile会把创建所有的订阅者并且把他们加到Dep对象中的（一个属性对应一个dep对象）。
当数据发生变化时，Observer会先观察到，并告诉dep，dep执行notify让watcher进行更新，最后响应到view中
链接
Vue3响应原理
运用了proxy代理的方法，
组件的data为什么是个函数
复用，实例，对象是引用类型，函数
通信
父-子 props
子-父$emit
Ref 获取实例的方式调用组件的属性或者方法
eventbus（事件总线）
vuex
SSR
服务端渲染 ：也就是将Vue在客户端把标签渲染成HTML的工作放在服务端完成，然后再把html直接返回给客户端。
路由
hash（url+#）和history（html5的API）
Render
1.template通过编译生成AST树
2.AST树生成Ve的render渲染函数
3.render渲染函数结合数据生成虚拟Dom
4.Diff和Patch后生成新的UI界面（真实Dom渲染）
作用：直接使用render函数的vuejs代码更较小，渲染过程更加快，性能可靠。
Ref
就是绑定元素或者子组件的，类似于js获取Dom节点，好处减少Dom节点的消耗
注意点：
-
ref本身是作为渲染结果被创建的，在初始渲染的时候不能访问他们
-
$refs也不是响应式的，不能再模板中做数据绑定
CDN引入
引入的是min.js，体积更小！
