1. Vue 3.0 性能提升主要是通过哪几方面体现的？
    • 更小的打包体积
    • 采用CompositionApi
    1. Vue 3.0 所采用的 Composition Api 与 Vue 2.x使用的Options Api 有什么区别？
    • 使得代码可以以业务逻辑为模块组织，方便了复用
    1. Proxy 相对于 Object.defineProperty 有哪些优点？
    • 实现了数组用length和用下标修改不能响应式变化的缺陷
    • 代理了对象，而不是属性
    • 本身的实现过程更加简洁
    1. Vue 3.0 在编译方面有哪些优化？
    • 使用浏览器支持模块化加载的特性直接加载文件，使用服务端贬编译为js文件，再返回给浏览器解释执行，不需要提前打包项目
    • 加速了热更新响应速度，得到了更好的开发体验
    1. Vue.js 3.0 响应式系统的实现原理？
    • weakMap, Map, Set
    • reactive, ref, effect,

    数组也可以用 in 遍历

    在todo list 案例中，我觉得有收获的点：

    • 根据hash名称创建函数，完美避开if else 语句

      1. <ul class="filters">
      2.   <li><a href="#/all">All</a></li>
      3.   <li><a href="#/active">Active</a></li>
      4.   <li><a href="#/completed">Completed</a></li>
      5. </ul>

      ```javascript const filter = { all: list => list, active: list => list.filter(todo => !todo.completed), completed: list => list.filter(todo => todo.completed) } // 处理路由变化逻辑

      const onHashChange = () => { const hash = window.location.hash.replace(‘#/‘, ‘’) if (filter[hash]) {

      1. // 正确的路由跳转只有3个
      2. type.value = hash

      } else {

      1. // 不正确的路由跳转有 路由输入错误 初始状态下没有hash 都直接转到 all hash 处理
      2. type.value = 'all'
      3. window.location.hash = ''

      } }

    // 监听hashchange事件（我不熟悉这个事件） onMounted(() => { window.addEventListener(‘hashchange’, onHashChange) onHashChange() })

    onUnmounted(() => { window.removeEventListener(‘hashchange’, onHashChange) })

    1. 疑惑的点：<br />todo === editingTodo 这都是对象，怎么可以用来判断是否相等<br />我觉得还需要听一遍，这里面的逻辑对我来说很有条理，功能各司其职，需要学习它如何拆分，又如何分类这些功能的。
    2. ```vue
    3. <template>
    4.   <section id="app" class="todoapp">
    5.     <header class="header">
    6.       <h1>todos</h1>
    7.       <input
    8.         class="new-todo"
    9.         placeholder="What needs to be done?"
    10.         autocomplete="off"
    11.         autofocus
    12.         v-model="input"
    13.         @keyup.enter="addTodo"
    14.         >
    15.     </header>
    16.     <section class="main" v-show="count">
    17.       <input id="toggle-all" class="toggle-all" v-model="allDone" type="checkbox">
    18.       <label for="toggle-all">Mark all as complete</label>
    19.       <ul class="todo-list">
    20.         <li
    21.           v-for="todo in filteredTodos"
    22.           :key="todo"
    23.           :class="{ editing: todo === editingTodo, completed: todo.completed }"
    24.         >
    25.           <div class="view">
    26.             <input class="toggle" type="checkbox" v-model="todo.completed">
    27.             <label @dblclick="editTodo(todo)">{{ todo.text }}</label>
    28.             <button class="destroy" @click="remove(todo)"></button>
    29.           </div>
    30.           <input
    31.             class="edit"
    32.             type="text"
    33.             v-editing-focus="todo === editingTodo"
    34.             v-model="todo.text"
    35.             @keyup.enter="doneEdit(todo)"
    36.             @blur="doneEdit(todo)"
    37.             @keyup.esc="cancelEdit(todo)"
    38.             >
    39.         </li>
    40.       </ul>
    41.     </section>
    42.     <footer class="footer" v-show="count">
    43.       <span class="todo-count">
    44.         <strong>{{ remainingCount }}</strong> {{ remainingCount > 1 ? 'items' : 'item' }} left
    45.       </span>
    46.       <ul class="filters">
    47.         <li><a href="#/all">All</a></li>
    48.         <li><a href="#/active">Active</a></li>
    49.         <li><a href="#/completed">Completed</a></li>
    50.       </ul>
    51.       <button class="clear-completed" @click="removeCompleted" v-show="count > remainingCount">
    52.         Clear completed
    53.       </button>
    54.     </footer>
    55.   </section>
    56.   <footer class="info">
    57.     <p>Double-click to edit a todo</p>
    58.     <!-- Remove the below line ↓ -->
    59.     <p>Template by <a href="http://sindresorhus.com">Sindre Sorhus</a></p>
    60.     <!-- Change this out with your name and url ↓ -->
    61.     <p>Created by <a href="https://www.lagou.com">教瘦</a></p>
    62.     <p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
    63.   </footer>
    64. </template>
    66. <script>
    67. import './assets/index.css'
    68. import useLocalStorage from './utils/useLocalStorage'
    69. import { ref, computed, onMounted, onUnmounted, watchEffect } from 'vue'
    71. const storage = useLocalStorage()
    73. // 1. 添加待办事项
    74. const useAdd = todos => {
    75.   const input = ref('')
    76.   const addTodo = () => {
    77.     const text = input.value && input.value.trim()
    78.     if (text.length === 0) return
    79.     todos.value.unshift({
    80.       text,
    81.       completed: false
    82.     })
    83.     input.value = ''
    84.   }
    85.   return {
    86.     input,
    87.     addTodo
    88.   }
    89. }
    91. // 2. 删除待办事项
    92. const useRemove = todos => {
    93.   const remove = todo => {
    94.     const index = todos.value.indexOf(todo)
    95.     todos.value.splice(index, 1)
    96.   }
    97.   const removeCompleted = () => {
    98.     todos.value = todos.value.filter(todo => !todo.completed)
    99.   }
    100.   return {
    101.     remove,
    102.     removeCompleted
    103.   }
    104. }
    106. // 3. 编辑待办项
    107. const useEdit = remove => {
    108.   let beforeEditingText = ''
    109.   const editingTodo = ref(null)
    111.   const editTodo = todo => {
    112.     beforeEditingText = todo.text
    113.     editingTodo.value = todo
    114.   }
    115.   const doneEdit = todo => {
    116.     if (!editingTodo.value) return
    117.     todo.text = todo.text.trim()
    118.     todo.text || remove(todo)
    119.     editingTodo.value = null
    120.   }
    121.   const cancelEdit = todo => {
    122.     editingTodo.value = null
    123.     todo.text = beforeEditingText
    124.   }
    125.   return {
    126.     editingTodo,
    127.     editTodo,
    128.     doneEdit,
    129.     cancelEdit
    130.   }
    131. }
    133. // 4. 切换待办项完成状态
    134. const useFilter = todos => {
    135.   const allDone = computed({
    136.     get () {
    137.       return !todos.value.filter(todo => !todo.completed).length
    138.     },
    139.     set (value) {
    140.       todos.value.forEach(todo => {
    141.         todo.completed = value
    142.       })
    143.     }
    144.   })
    146.   const filter = {
    147.     all: list => list,
    148.     active: list => list.filter(todo => !todo.completed),
    149.     completed: list => list.filter(todo => todo.completed)
    150.   }
    151.   const type = ref('all')
    152.   const filteredTodos = computed(() => filter[type.value](todos.value))
    153.   const remainingCount = computed(() => filter.active(todos.value).length)
    154.   const count = computed(() => todos.value.length)
    156.   const onHashChange = () => {
    157.     const hash = window.location.hash.replace('#/', '')
    158.     if (filter[hash]) {
    159.       type.value = hash
    160.     } else {
    161.       type.value = 'all'
    162.       window.location.hash = ''
    163.     }
    164.   }
    166.   onMounted(() => {
    167.     window.addEventListener('hashchange', onHashChange)
    168.     onHashChange()
    169.   })
    171.   onUnmounted(() => {
    172.     window.removeEventListener('hashchange', onHashChange)
    173.   })
    175.   return {
    176.     allDone,
    177.     count,
    178.     filteredTodos,
    179.     remainingCount
    180.   }
    181. }
    183. // 5. 存储待办事项
    184. const useStorage = () => {
    185.   const KEY = 'TODOKEYS'
    186.   const todos = ref(storage.getItem(KEY) || [])
    187.   watchEffect(() => {
    188.     storage.setItem(KEY, todos.value)
    189.   })
    190.   return todos
    191. }
    193. export default {
    194.   name: 'App',
    195.   setup () {
    196.     const todos = useStorage()
    198.     const { remove, removeCompleted } = useRemove(todos)
    200.     return {
    201.       todos,
    202.       remove,
    203.       removeCompleted,
    204.       ...useAdd(todos),
    205.       ...useEdit(remove),
    206.       ...useFilter(todos)
    207.     }
    208.   },
    209.   directives: {
    210.     editingFocus: (el, binding) => {
    211.       binding.value && el.focus()
    212.     }
    213.   }
    214. }
    215. </script>
    217. <style>
    218. </style>