1. MVVM
Model：数据模型
View：UI组件
ViewModel：通过双向数据绑定把 View层和 Model 层连接起来。
2. Vue、React框架特点
双向绑定（双向数据绑定），虚拟DOM，组件化
3. v-show和v-if
v-if：动态操作DOM元素
v-show：修改display属性为None
性能：v-if具有更高的切换开销，v-show具有更高的初始渲染开销
4. v-if和v-for不建议一起使用
v-for的优先级比v-if高，二者同时使用时会先循环再判断，将列表渲染出来后再根据判断做销毁，造成不必要的计算。更好的做法是，通过computed属性对数据做过滤，或v-show+v-for？
5. 双向数据绑定
双向体现在：数据变化 -> 视图更新；视图交互变化（例如input操作）-> 数据模型变更。
Vue2.x 与 Vue3.x 对双向数据绑定的实现方式不同：Vue2.x 采用数据劫持结合发布订阅模式，通过Object.defineProperty来劫持各个属性的setter和getter，Vue3.x使用ES6原生的Proxy。
Observer、Compile、Watcher
6. 数据计算computed、watch、methods
7. 插槽
插槽就是slot，<slot></slot>。
作用是向component中添加额外的内容。
8. key
Key相当于给vnode添加一个唯一的id，利于diff算法的追踪，在DOM diff 算法中能够高效地更新虚拟DOM。此外，key还可用于强制替换元素。
常见用法，例如列表循环：
<div v-for = “num in nums”, :key = “组件uid+index”> {{ num }} </div>
9. 过滤器
一般用来生成格式文本、格式id等。
定义过滤器有2种方式：双花括号插值 & v-bind 表达式。
定义过滤的方法有 2 种表达方式：全局定义 & 组件内定义。
// 双花括号插值
{{ rawMessage | formalMessage }}
// v-bind
<div v-bind:id = “rawMessage | formalMessage”}></div>
// 组件内定义，首字母大写
filters: {
formalMessage: function(value){
if(!value) return ‘’
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
// 全局定义
Vue.filter(‘formalMessage’: function(value) {
if(!value) return ‘’
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
})
10. scoped（没看懂）
设置作用域样式 scoped css。
11. ref
用于获取DOM元素或组件的引用，也可用于父子组件通信。
$refs 只会再组件渲染完成之后生效。
12. NextTick
在vue中，并非数据一发生改变就立即更新视图。如果我们需要实时获取到最新的DOM，可以在修改数据后手动调用 $nextTick 方法（例如，在mounted，updated钩子函数中调用 vm.$nextTick 方法）。
13. Keep-alive
用于缓存不活动的组件实例，当我们返回时能重新激活，避免重复渲染。
14. data
组件中的data 写成一个函数，以函数返回值的形式定义。相当于为每个组件创建一个私有的数据空间，避免（全局数据）牵一发而动全身。
15. 组件生命周期
Vue生命周期有8个阶段：创建前后，挂载前后，更新前后，销毁前后。
另外，组件还有激活前后 2 个阶段。
16. 组件通信
父子props，子父emit，层级很多时用provide，全局得到状态管理使用vuex。
具体：父传子：props
子传父：this.$emit
多层级：父组件中使用provide，子组件中使用inject
兄弟组件：中间事件总线思想（也叫事件巴士）
以上是比较常见的。
17. 事件总线eventbus
示例没看懂。
18. vue-router
路由有2个属性：$router和 $route。
19. hash 和 history 模式的区别
$router.mode有2种模式：hash模式和history模式。
在显示上：hash模式的URL带有 # 号，而history模式没有。
二者在底层实现方式上也不同：hash模式监听location.hash 的改变，history模式用history.pushState() 改变url地址且不发送请求，用history.replaceState() 读取历史记录栈。
默认为hash模式。
20. 路由传参
路由传参方式有2种：$route.params 和 $route.query。
二者写法不同，
另外，使用query 传参所传递的参数会显示在地址栏中，使用parmas传参所传递的参数可以显示在地址栏中，也可以不显示，params相对于query更安全一些：
方式一：通过params来传递。
// 父组件前往？
this.$router.push({
name: ‘B’,
params: {
page: ‘2’
}
})
// 子组件读取
this.num = this.$route.params.page
方式二：通过query来传递。
// 父组件前往？
this.$router.push({
path: ‘/children’,
query: {
page: ‘2’
}
})
// 子组件读取
this.num = this.$route.query.page
21. 前端路由
检测url变动，解析路由实现UI更新。
Hash模式，监听浏览器地址hash值的变化，执行浏览器前进、后退操作。优势是兼容性好，但路径在#后面，不好看。
History模式，相当于有一个栈来保存浏览器地址的变化历史，使用history.pushState() 和 history.replaceState()会直接修改浏览器地址，但不会执行浏览器前进、后退操作。需要调用history.go()、history.back()、history.forward()方法来跳转页面。缺点是兼容性不如hash模式，但路径正规，因为pushState不能添加跨域网址？
22. Vuex
是一个状态管理库。
用于集中式地对组件的状态进行存储和管理。
避免多个实例或组件共享同一个数据时，出现数据不同步或数据状态难以维护等错误。
23. Vuex的优点
使多层嵌套的组件、兄弟组件之间的状态更好维护管理。
减轻服务端压力，对于同一份数据，请求会缓存，使所有组件共用。
大型项目协作，便于团队之间开发、维护和调试。
主要是没用过，不知道怎么结合项目回答。
24. Vuex的五个核心概念：
Store：仓库/商店，包含应用中的大部分状态，同时提供了state、getters、mutations、action和modules 5 个方法。
State：存储数据，使用 this.$store.state获取。
Getters：访问数据，是state的计算属性，随state发生变化而同时改变。
Mutations：修改state的值。（mutation是名词，这个单词的释义是变异。）
Action：异步的修改state的值。
Modules：分割store，使得每个module都拥有自己的state、getters、mutations、actions等调度方法。
25. Flux模式：
Vuex的思想是实现flux模式。
在一个应用程序中，包含的组件可能有很多，多个组件之间共享数据，它们互连的复杂性可能会增加到使数据状态不在可预测或不可理解，使应用程序无法扩展或维护。
Flux要解决多组件之间状态管理混乱的问题。
Flux的特点：（1）单一数据来源，组件只能从store中读取数据；（2）数据只可读，组件可以自由地从store中读取数据，但不能直接更改数据；（3）更新是同步的，不能是异步的，否则很难判断执行的顺序。
Flux的具体应用是vuex和react。
26. 虚拟DOM
虚拟DOM本质上是一个能描述DOM结构及其属性信息的JS对象。
假如没有虚拟DOM，更新过程为：数据改变->操作DOM->视图更新。
有了虚拟DOM，Vue工作流：数据改变 -> 计算变更，操作虚拟DOM -> 操作真实DOM -> 视图更新。
虚拟DOM的优点：（1）减少DOM操作，减少DOM树重新渲染，减少重排，优化性能。（2）将渲染过程抽象化，实现跨平台、跨端能力。
虚拟DOM的缺点：当每一次改动较少时，虚拟DOM是高效的。如果改动很多的话，使用虚拟DOM多出了很多计算，是不利的。
27. Diff算法
计算新老DOM的最小变化。
（1）只进行同级比较（具有相同父节点的新旧子节点进行比较），不跨级比较。
（2）标签不同，直接删除，不比较
（3）标签名相同，key相同，认为是相同节点，不继续深度比较。
28. Vue3 composition（成分）和vue2 option（选项）区别
（1）代码组织形式：Vue2根据选项功能组织代码，Vue3可根据逻辑功能组织代码，可读性更强。
（2）逻辑复用：Vue2使用混入（mixins）或全局函数，可能导致命名冲突及数据来源不明确；Vue3使用setup函数，逻辑复用更灵活。
（3）响应式：Vue2通过this.$data来访问响应式数据；Vue3通过ref、reactive函数创建响应式数据（Proxy）。
（4）TypeScript支持：Vue3提供更好的TypeScript支持。
29. Vue2和Vue3的区别：
（1）打包体积：引入了tree-shaking，移除了不常用的api，打包体积变小。
（2）逻辑复用：引入了composition API，组件逻辑更易组织和复用。
（3）响应式：用Proxy替代Object.defineProperty，提高了响应式系统的性能。
（4）TypeScript：Vue3提供更好的TypeScript支持。
（5）编译优化：Vue3只需要对比动态节点内容。
（6）路由、生命周期、props使用、vuex状态管理、父子传值等写法不同。
30. 为什么使用Proxy替换Object.defineProperty？
这个问题属于“响应式”的范畴。
总结而言，Object.defineProperty 存在以下问题：
- 无法监听到数组的索引变化；
- 添加或删除对象不会触发属性的get或set操作，也无法监听；
- Object.defineProperty 在处理嵌套对象时需要递归，有性能问题。
Vue3中引入proxy，提供了更为丰富的劫持操作，能够劫持整个对象。对递归观察对象树的变化更加轻松。也可以更准确地监测数组的变化。
7190
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
