在前面说了vue3的新特性与其新添加的setup函数和实现响应式更新的三个方法
前面的学习:
这里继续记录vue的新特性和方法,以及不同于vue2之处;
vue3的生命周期函数
在vue3中,生命周期函数并没有什么大变化,依然是八大生命周期函数,这里值得一提的是setup中的生命周期函数,在setup函数中,没有创建之前(beforeCreate)与创建完成(created)这两个函数,因为这两个函数在外界已经完成建立,而且setup函数的主要作用也是创建;
剩下的生命周期函数如果要在setup中使用需要进行引入
import {
onBeforeMount,
onMounted,
onBeforeUpdate,
onUpdated,
onBeforeUnmount,
onUnmounted
} from "vue"
//加上一个"on"
使用的形式也略有不同:
export default {
setup() {
// 组合式api的生命周期函数
onBeforeMount(()=>{
console.log(1);
})
onMounted(()=>{
console.log(2);
})
onBeforeUpdate(()=>{
console.log(3);
})
onUpdated(()=>{
console.log(4);
})
onBeforeUnmount(()=>{
console.log(5);
})
onUnmounted(()=>{
console.log(6);
})
}
}
//以一种回调函数的形式进行使用
侦听器与计算属性
注意:侦听器与计算属性的作用没有变化,但在setup中使用侦听器与计算属性时,都需要从vue中引入才可使用,而使用了reactive方法默认深侦听
语法:
//计算属性:
computed(()=>{
//代码计算过程
return 结果
});
//侦听器:
//普通监听
watch(监听的数据,(newval(这是新值),oldval(这是旧值))=>{
// 处理
})
//可以加上deep进行深侦听:
watch(监听的数据,(newval,oldval)=>{
// 处理
},{
deep:true
});
teleport标签
作用:将元素移动至指定位置,一般用于弹框,广告栏
语法:
<teleport to="选择器">
//html内容
</teleport>
注意点:
1、teleport标签需要手动给定位属性,否则无法移动
2、to的值必须是在teleport标签之前挂载完毕的选择器,否则无法移动
vue3的渲染形式
在vue3中,渲染形式有了很大的变化,不同于vue2
vue2中:
import Vue from "vue"
import App from "./App.vue"
new Vue({
// render:h=>h("h1","h1里面的内容") 渲染某标签
render:h=> h(App)// 渲染主组件
}).$mount("#app")
1、h是自带参数,直接使用
2、渲染方式是以Vue构造函数的实例方式进行参数传递,然后挂载
vue3中:
import { createApp,h } from 'vue'
import App from "./App.vue"
createApp({
render:()=> h(App)
}).mount('#app')
1、h需要引入使用
2、渲染方式是引入vue中的方法,然后对这个方法进行参数传递挂载
3、不存在vue实例,避免大量方法和属性闲置而浪费性能