// v-show 和 v-if 的区别
// v-show 通过 Css display 控制显示和隐藏
// v-if 组件是真正的渲染和销毁 而不是显示和隐藏
// 频繁切换显示状态用 v-show 否则用 v-if
// 为何在 v-for 中使用key
// 必须用 key， 且不能是 index 和 random
// diff算法中通过 tag 和 key来判断，是不是 sameNode
// 减少渲染次数， 提升渲染性能
// 描述 Vue 组件的生命周期 (父子组件)
// 单个组件
// 挂载阶段 - beforeCreate created beforeMount mounted
// 更新阶段 - beforeUpdate updated
// 销毁阶段 - beforeDestroy destroyed
// created 和 mounted 区别？
// created - 并没有开始渲染 渲染前， vue 的实例已经初始化 完事了
// mounted - 页面已经渲染完了
// beforeDestroy - 解除绑定 销毁子组件 以及 事件监听器
// 父子组件 执行生命周期的先后顺序
// created - 父组件先执行 子组件后执行 - 创建 Vue实例 是从外到内的
// mounted - 子组件先执行 父组件后执行 - 渲染 DOM的话 是从内到外的
// beforeUpdate - 父组件先执行 子组件后执行 - 首先父组件触发更新 然后通知到子组件
// updated - 子组件先执行 父组件后执行 - 子组件更新完事 才能说父组件也更新完事了
// beforeDestroy - 父组件先执行 子组件后执行 - 同更新
// destroyed - 子组件先执行 父组件后执行 - 同更新
// vue组件 如何通讯 (常见)
// 父子组件 - props 和 this.$emit
// 自定义事件 - event.$on event.$off event.$emit
// vuex
// 描述 组件渲染和更新的过程
// './组件渲染和更新.png'
// Render 会返回一个 vNode， 然后 render(渲染)过程中， 会触发视图更新 (data的 setter getter)
// 然后 getter 的时候 收集依赖 setter的时候更新依赖~
// 双向数据绑定 v-model 的实现原理
// input元素 value = this.name
// 绑定 input 事件 this.name = $event.target.value // 就是当前 value 绑定到 this.name 上
// data 更新触发 render
// 对 MVVM 的理解
// View <-> ViewModel(Vue做的处理 比如 数据监听 指令啥的) <-> Model
// computed 有什么特点？
// 缓存， data 不变不会重新计算
// 提高性能
// 为何组件 data 必须是一个函数？
// 其实 export default 到处后 Vue 是一个 class 去使用的是就是一个组件的实例话
// 我们在 实例化之后去执行 data, 如果组件不是函数的话 那数据就共享了...
// ajax 请求应该放在 哪个生命周期？
// mounted
// Js 是单线程， ajax异步获取数据
// 放在 mounted 之前没有用，只会让逻辑更加混乱..
// 如何将组件 所有的 props 传递给 子组件？ -- 应用场景不多
// $props
// {{ name }}
{{ website.title }}
// // 父组件里面的使用
//
//
// {{ slotProps.slotData.title }}
//
//
// Vuex 中的 action 和 mutaion 有何区别？
// action 中可以处理异步， mutaion 不可以
// mutaion 做原子操作 (每次都只做一个操作)
// action 可以整合多个 mutation
// vue-router 常用的路由模式
// hash(默认)
// H5 history(需要服务端支持)
// 两者比较
// 如何配置 Vue-router 异步加载
// () => import('url')
// 用 vnode 描述一个DOM结构
//
// vdom
//
// - a
//
//
// {
// tag: 'div', // 目标元素~
// props: { // 属性 样式 事件啥的~ 子元素
// id: '1',
// className: '2',
// },
// children: [
// {
// tag: 'p' // text文字也是 子节点
// children: 'vdom'
// },
// {
// tag: 'ul',
// props: {
// style: 'font-size: 20px';
// },
// children: [
// {
// tag: 'li',
// children: 'a'
// }
// ]
// }
// ]
// }
// 监听 data 变化的核心 API 是什么？
// Object.defineProperty
// 以及深度监听 监听数组
// 有什么缺点
// Vue 如何监听数组变化
// Object.defineProperty 不能监听数组变化
// 重新定义原型， 重写push pop 等方法，实现监听
// Proxy 可以原生支持监听数组变化~
// 请描述响应式原理
// 监听 data 变化
// 组件渲染 和 更新的流程...
// 执行 render 函数， 生成vnode, patch(elem, vnode)
// diff 算法事件复杂度
// O(n)
// 在O(n^3)基础上做了一些调整
// - 只比较统一层级， 不跨级比较
// - tag 不相同，则直接删掉重建， 不再深度比较
// - tag 和 key，两者都相同， 则认为是相同节点， 不再深度比较。
// 简述 diff 算法过程
// patch(elem, vnode) 和 patch(vnode, newVnode)
// patchVnode 和 addVnodes 和 removeVnodes
// updateChildren(key 的重要性 判断是不是同一个节点)
// Vue为什么是异步渲染， $nextTick 何用？
// 异步渲染 (以及合并 data 修改) 以提高性能
// $nextTick 在 DOM 更新完之后 触发回调
// Vue 常见的性能优化
// - 合理使用 v-show 和 v-if
// - 合理使用 computed
// - v-for中加key 以避免和 v-if 同时使用
// - 自定义事件 DOM事件要 及时销毁
// - 合理使用 异步组件
// - 合理使用 keep-alive
// - data 层级不要太深
// - 使用 vue-loader 在开发环境做 模版编译(预编译)
// - webpack 层面的优化(后面会讲)
// - 前端通用的性能优化，如 图片懒加载。
// - 使用 SSR
