一.vue分为选项式和组合式
1.选项式就是一般vue2 的写法,包含多个选项来描述组件的逻辑,例如data,methods和生命周期函数。选项式多定义的属性会暴露在函数内部的this上,他会指向组件实例
<script>
export default {
// data() 返回的属性将会成为响应式的状态
// 并且暴露在 `this` 上
data() {
return {
count: 0
}
},
// methods 是一些用来更改状态与触发更新的函数
// 它们可以在模板中作为事件处理器绑定
methods: {
increment() {
this.count++
}
},
// 生命周期钩子会在组件生命周期的各个不同阶段被调用
// 例如这个函数就会在组件挂载完成后被调用
mounted() {
console.log(`The initial count is ${this.count}.`)
}
}
</script>
<template>
<button @click="increment">Count is: {{ count }}</button>
</template>
2.组合式就是一般vue3 的写法,单个文件中组合式一般和<script setup>搭配使用
<script setup>
import { ref, onMounted } from 'vue'
// 响应式状态
const count = ref(0)
// 用来修改状态、触发更新的函数
function increment() {
count.value++
}
// 生命周期钩子
onMounted(() => {
console.log(`The initial count is ${count.value}.`)
})
</script>
<template>
<button @click="increment">Count is: {{ count }}</button>
</template>
二.其他不同
1、双向数据绑定原理不同
在Vue 3中,使用Proxy来实现数据监听和响应式更新的优势在于以下几点:
1.监听整个对象:Vue 2.中使用Object.defineProperty只能监听对象的某个属性,而Proxy可以直接监听整个对象,无论是对象属性的新增、修改还是删除,都能够被监听到。这样就省去了在Vue 2中通过递归遍历对象的属性来实现监听的复杂逻辑。
2.性能提升:使用Proxy不需要通过闭包和循环来遍历对象属性,在访问对象属性时直接拦截并触发相应的操作。这样可以避免了在Vue 2.中由于遍历对象属性导致的性能损耗。
3.监听数组:Vue3中的Proxy可以直接监听数组的变化,无需像Vue 2.x中那样使用特殊的数组方法(如push、pop等)进行特殊的操作来实现监听。当对数组进行操作时,Proxy可以捕获到数组的变化并进行响应式更新。
举个例子,假设有以下代码:
const obj = new Proxy({}, {
set(target, key, value) {
console.log('设置属性', key, '为', value);
target[key] = value;
return true;
}
});
obj.name = 'ChatAI';
// 输出:设置属性 name 为 ChatAI
在上面的例子中,当给obj对象设置属性时,Proxy会捕获到属性的变化,并在控制台输出相应的信息。这样就实现了属性的监听和响应式更新。
总之,使用Proxy API替代了Object.defineProperty,使得Vue 3的双向数据绑定更加高效和灵活,而不仅限于属性级别的监听。
2、是否支持碎片
vue2:vue2不支持碎片。
vue3:vue3支持碎片(Fragments),就是说可以拥有多个根节点。
3、定义数据变量和方法不同
vue2:vue2是把数据放入data中,在vue2中定义数据变量是data(){},创建的方法要在methods:{}中。
vue3:,vue3就需要使用一个新的setup()方法,此方法在组件初始化构造的时候触发。使用以下三个步骤来建立反应性数据:
- 从vue引入reactive;
- 使用reactive() 方法来声明数据为响应性数据;
- 使用setup()方法来返回我们的响应性数据,从而template可以获取这些响应性数据。
4、生命周期钩子函数不同
vue2:vue2中的生命周期:
- beforeCreate 组件创建之前
- created 组件创建之后
- beforeMount 组价挂载到页面之前执行
- mounted 组件挂载到页面之后执行
- beforeUpdate 组件更新之前
- updated 组件更新之后
vue3:vue3中的生命周期:
- setup 开始创建组件
- onBeforeMount 组价挂载到页面之前执行
- onMounted 组件挂载到页面之后执行
- onBeforeUpdate 组件更新之前
- onUpdated 组件更新之后
5、父子传参不同
vue2:父传子,用props,子传父用事件 Emitting Events。在vue2中,会调用this$emit然后传入事件名和对象。
vue3:父传子,用props,子传父用事件 Emitting Events。在vue3中的setup()中的第二个参数content对象中就有emit,那么我们只要在setup()接收第二个参数中使用分解对象法取出emit就可以在setup方法中随意使用了。
6、指令与插槽不同
vue2:vue2中使用slot可以直接使用slot;v-for与v-if在vue2中优先级高的是v-for指令,而且不建议一起使用。
vue3:vue3中必须使用v-slot的形式;vue3中v-for与v-if,只会把当前v-if当做v-for中的一个判断语句,不会相互冲突;vue3中移除keyCode作为v-on的修饰符,当然也不支持config.keyCodes;vue3中移除v-on.native修饰符;vue3中移除过滤器filter。
7、main.js文件不同
vue2:vue2中我们可以使用pototype(原型)的形式去进行操作,引入的是构造函数。
vue3:vue3中需要使用结构的形式进行操作,引入的是工厂函数;vue3中app组件中可以没有根标签。