1.语法
vue3支持vue2的选项式API的写法,但是也拥有自己的一套语法;
新的vue3语法为组合式API语法;
下述代码中的语法为非脚手架中的语法;所以每个函数都需要使用Vue对象调用;
// 设置vue实例对象
var vm = {
setup() {
// 基本类型值使用Vue.ref()进行设置
var dataOne = Vue.ref('设置的数据值');
// 更改基本类型的值
dataOne.value = '改变后的基本类型值';
// 引用类型值使用Vue.reactive()设置
var dataTwo = Vue.reactive({name:"demo",age:29})
// 更改基本类型的值
dataTwo.name = 'example';
// 生命周期函数
Vue.onBeforeMount(() => {
console.log('渲染之前');
});
Vue.onMounted(() => {
console.log('渲染完毕的');
});
Vue.onBeforeUpdate(() => {
console.log('更新之前');
});
Vue.onUpdated(() => {
console.log('更新之后');
});
Vue.onBeforeUnmount(() => {
console.log('销毁之前');
});
Vue.onUnmounted(() => {
console.log('销毁之后');
});
// 计算属性: 有返回值的函数
var all = Vue.computed(()=>{
return dataTwo.name + dataOne.value;
})
// watch 监听器 监听函数第一个参数是改变后的值,第二个参数是改变前的值
// 写法一 直接监听基本数据类型或者引用数据类型整个
// 第一个参数是:被监听:是设置的接受基本类型或者引用类型的变量,第二个是监听函数,
// 基本数据类型
Vue.watch(dataOne,(newValue,oldValue)=>{
console.log(newValue);
})
// 引用数据类型
Vue.watch(dataTwo,(newValue,oldValue)=>{
console.log(newValue);
})
// 写法二 监听基本类型值的值和引用数据类型的某个属性或者元素,
// 第一个被监听的对象需要使用函数返回值,第二个是监听函数
// 基本数据类型
Vue.watch(()=>dataOne.value,(newValue,oldValue)=>{
console.log(newValue);
})
// 引用数据类型
Vue.watch(()=>dataTwo.name,(newValue,oldValue)=>{
console.log(newValue);
})
return {
dataOne,
all
}
}
}
2.vue2与vue3的区别
1.Vue2中使用new Vue()创建根组件对象,vue3使用Vue.createApp()创建根组件对象
2.Vue2中设置根组件模板使用el字段绑定,vue3渲染根组件时候使用根组件对象的mount的函数;
3.Vue2 根组件中data是一个对象,Vue3根组件中data返回对象的一个函数;
4.Vue3中废除了filters对象字段,可以使用computed进行代替;
5.Vue2使用钩子函数通过钩子函数的函数名字段;Vue3使用钩子函数通过使用Vue对象的钩子函数(这里钩子函数使用on+钩子函数函数名);
6. 不同于vue2的八个钩子函数(beforeCreate,created,beforeMounted,mounted,beforeUpdate,updated,beforeDestroy,destroyed),vue3也有八个钩子函数(setup,mount,beforeMount,mounted,beforeUpdate,updated,beforeUnmount,unmounted);