组件更新 计算监听属性 声明周期

是否响应式？ return 响应式，对象中的属性字段需要声明

![[Pasted image 20230209203859.png]]

计算属性 computed

// 强制刷新模板
@click="() => $forceUpdate()"

// 强制刷新模板
@click="() => $forceUpdate()"

数据变化才会执行 getter

侦听器 监听器 watch

？函数节流 Ajax 异步获取数据

能用 computed 就用 computed

生命周期，钩子函数

• 创建阶段 only once
  • beforeCreate
  • created
  • beforMount
  • render
  • mounted nextTick()
• 更新阶段
  • beforeUpdate
  • render
  • updated
• 销毁阶段 only once
  • beforeDestroy
  • destroyed

函数式组件

export default {
 function: true,
 render: (h,ctx) => {
 return ctxx.scopedSlots.default && ctx.scopedSlots.default(ctx.props || {});
 }
}

export default {
 function: true,
 render: (h,ctx) => {
 return ctxx.scopedSlots.default && ctx.scopedSlots.default(ctx.props || {});
 }
}

临时变量 TempVar.js 非响应式数据

常用高级特性 provide reject

组件通信

讲的也太糙了吧。。。

获取跨层级组件实例 ref this.$refs['']

递归查找

• 代码繁琐
• 性能低效

callback ref 主动通知 主动获取

Vuex ​

Vuex 运行机制

使用姿势：

Vue.use(Vuex)

const store = new Vuex.Store({
	state : {
 count: 0,
},
mutations: {

}, // 赋值
actions:{}, // 异步赋值
getters:{} // 缓存 类似计算属性
}) 

this.$store.state.count

const store = new Vuex.Store({
	state : {
 count: 0,
},
mutations: {

}, // 赋值
actions:{}, // 异步赋值
getters:{} // 缓存 类似计算属性
}) 

this.$store.state.count

$store 是如何挂载到 this 实例上的

ES6 扩展运算符 ...

使用 Vuex 优化 H5_APP 缓存一些类型字典信息

常用工具 ​

VSCode+Vetur

eslint 配置 快速生成模板的功能

ESLint ​

校验

Prettier ​

格式美化 配置，一致性，防止冲突

vue-devtools ​

官方出品，Edge 已安装，Chrome 需要联网

Component Vuex Events Routing Performance

单元测试 ​

jest Or mocha @vue/test-utils sinon

Vue-Cli ​

Webpack Babel 配置