// 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
  // <User v-bind="$props"></User>

// 如何自己实现 v-model
  // index组件 - 引用 customVModel 组件
  <p>{{ name }}</p>
  <customVModel v-model="name"/>
  export default {
    components: {
      customVModel,
    }
    data() {
      return {
        name: '123'
      }
    }
  }
  // customVModel 组件
  // e.g 颜色选择器 -  
  <input type="text"
    :value="text"
    @input="$emit('change', $event.target.value)" />
  export default {
    model: {
      prop: 'text', // 对应 props 里的 text 的属性
      event: 'change' // 和 input 事件的 change 对应起来
    },
    props: {
      text: String,
      default: '',
    }
  }

// 多个组件有相同的逻辑，如何抽离？
  // mixin
  // 以及 mixin 的一些缺点

// 何时使用 异步组件？
  // 加载大组件
  // 路由异步加载

// 何时使用 keep-alive
  // 缓存组件 不需要重复渲染 (例如 多个静态的tab页面切换)
  // 优化性能

// 何时使用 beforeDestory
  // 解绑自定义事件 - event.$off
  // 清除定时器
  // 解绑自定义的 DOM事件， 如 window scroll 等
    // 用 vue 写的事件 vue会帮助你去解除~
  // 这三者 如果不及时 解除绑定的话，可能会造成 内存泄漏~

// 什么是 作用域 插槽
  // // slotData 和 slotProps 都是自定义的名字
  // <slot :slotData="website">{{ website.title }}</slot>
  // // 父组件里面的使用
  // <ScopedSlotDemo> 
  //   <template v-slot="slotProps">
  //     {{ slotProps.slotData.title }}
  //   </template>
  // </ScopedSlotDemo>

// Vuex 中的 action 和 mutaion 有何区别？
  // action 中可以处理异步， mutaion 不可以
  // mutaion 做原子操作 (每次都只做一个操作)
  // action 可以整合多个 mutation

// vue-router 常用的路由模式
  // hash(默认)
  // H5 history(需要服务端支持)
// 两者比较

// 如何配置 Vue-router 异步加载
  // () => import('url')

// 用 vnode 描述一个DOM结构
  // <div id="1" class="2">
  // <p>vdom</p>
  // <ul style="font-size: 20ox">
  //   <li>a</li>
  // </ul>
  // </div>
  // {
  // 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