vue3的学习（三）

在前面说了vue3的新特性与其新添加的setup函数和实现响应式更新的三个方法

前面的学习：

vue3的学习（一）

vue3的学习（二）

这里继续记录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实例，避免大量方法和属性闲置而浪费性能