1.面试题(vue2和vue3区别)
1)Vue3中设计了一套强大的组合APi代替了Vue2中的option API ,复用性更强了,更好的支持TS
Vue2.x 的组织代码形式,叫 Options API,而 Vue3 最大的特点是 Composition API 中文名是合成函数:以函数为载体,将业务相关的逻辑代码抽取到一起,整体打包对外提供相应能力。可以理解它是我们组织代码,解决逻辑复用的一种方案。
其中 setup 是 Composition API 的入口函数,是在 beforeCreate 声明周期函数之前执行的。还提供了 ref 函数定义一个响应式的数据,reactive 函数定义多个数据的响应式等等。
2)Vue3中使用了Proxy代替了Vue2中Object.defineProperty()方法实现数据的响应式(数据代理)
重写了虚拟DOM,速度更快了
1.Proxy Proxy 可以直接监听对象而非属性;而 Object.defineProperty需要遍历监听对象属性
2.Proxy 可以直接监听数组的变化;defineProperty 无法监听数组长度和索引的变化。
3.Proxy 可以直接监听对象新增的属性;defineProperty 只能劫持一开始就存在的属性,新增属性需要手动 Observer。
4.Object.defineProperty兼容性好
3)设计了一个新的脚手架工具,vite
4)ts支持更好
4)vue3常用api
1.reactive
定义多个响应式数据,内部基于 ES6 的 Proxy 实现,通过代理对象操作源对象内部数据都是响应式的
const obj = {
name: '小明',
age: 20,
wife: {
name: '小甜甜',
age: 18,
cars: ['奔驰', '宝马', '奥迪'],
},
}
// 通过改变user属性才有响应式,直接改变obj属性没有响应式
// user为代理对象,obj是目标对象
// 通过user点的方式去操作属性才有响应式,如果user拆包后再去使用属性,则属性不具备响应式
const user = reactive(obj)
2.ref
一般用来定义一个基本类型的响应式数据返回的是一个Ref对象,对象中有一个value属性,如果需要对数据进行操作,需要使用该Ref对象调用value属性的方式进行数据的操作
html模版中是不需要使用.value属性的写法
import { ref } from 'vue';
const count = ref(0)
// 方法
function updateCount(){
// 报错的原因:count是一个Ref对象,对象是不能进行++的操作
// count++
count.value++
}
<h3>{{ count }}</h3>
面试题
1.vue2和vue3区别!
2.Vue3 Proxy和Vue2中Object.defineProperty区别!