[JavaScript知识库]Vue3.0 —— watch、生命周期函数、teleport、props的基本语法使用

一、watch监听属性

??注意点：

• 监视reactive定义的响应式数据时，oldvalue无法正确获取，强制开始了深度监视（deep的配置失效）

• 监视reactive定义的响应式数据的某一个值时：deep配置有效

? ? 用法：

????????与Vue2.0中是一样的，但是需要用?import {watch} from 'vue'?来引用

<script setup>
    import {ref,watch} from 'vue'
    let count = ref(10)
    let add = () => {
      count.value ++
    }
    let subtract = () => {
      count.value --
    }
    watch(count,(newvalue,oldvalue) => {
      if (newvalue > 20) {
        alert("够了，够了，不要再加了")
      }else if (newvalue < 1) {
        alert("再减就没了哦")
      }
    })
</script>

<template>
  <div>
    <button @click="subtract">-</button>
    <span>{{count}}</span>
    <button @click="add">+</button>
  </div>
</template>

<style scoped>

</style>

二、生命周期函数

概念：

????????Vue中每个组件都是独立的，每个组件都有一个属于它的生命周期，从一个组件创建、数据初始化、挂载、更新、销毁、这就是一个组件所谓的生命中周期。

Vue3.0相对于2.0的不同：

????????在Vue3.x中，新增了一个setup生命周期函数，setup执行的时机是在beforeCreate生命函数之前执行，因为在这个函数中不能通过this来获取实例的；同时为了命名的统一，将beforeDestory改名为beforeUnmount，destoryed改名为unmounted。

????????vue3新增了生命周期钩子，我们可以通过在生命周期函数前加on来访问组件的生命周期。

比如：onBeforeMount 、onMounted、onBeforeUpdate 、onUpdated、onBeforeUnmount、onUnmounted

注意：使用时都需要通过?import { } from 'vue' 来引入

<script setup>
  import {
    onBeforeMount,
    onMounted,
    onBeforeUpdate,
    onUpdated,
    onBeforeUnmount,
    onUnmounted
  } from 'vue'
  

  onBeforeMount(() => {
    console.log("组件挂载之前执行");
  })
  onMounted(() => {
    console.log("组件挂载之后执行");
  })
  onBeforeUpdate(() => {
    console.log("组件更新之前执行");
  })
  onUpdated(() => {
    console.log("组件更新之后执行");
  })
  onBeforeUnmount(() => {
    console.log("组件解绑之前执行");
  })
  onUnmounted(() => {
    console.log("组件解绑在之后执行");
  })
</script>

三、teleport? ?

????????Vue 鼓励我们通过将 UI 和相关行为封装到组件中来构建 UI。我们可以将它们嵌套在另一个内部，以构建一个组成应用程序 UI 的树。

????????然而，有时组件模板的一部分逻辑上属于该组件，而从技术角度来看，最好将模板的这一部分移动到 DOM 中 Vue app 之外的其他位置

? ? ? ? 因此就有了teleport

<template>
  <div>
    <button @click="btn1">模态弹窗</button>

    <teleport to="body">  
        //to属性：放到指定位置,比如这里就是指定放到body上
      <div class="mask" v-show="flag">
        <div class="box">
          <h1>{{msg}}</h1>
        </div>
        <button @click="btn1">关闭</button>
      </div>
    </teleport>
  </div>
</template>

四、属性 props

? ? ? ? 由于在Vue3.0中setup可以写作一个函数，也可以用语法糖作为script标签的属性，所以在3.0中取属性值也有两种方式：

? ? ? ? 父组件传值：

 <Box :msg="n" :count=200></Box>

? ? ? ? （1）setup函数中取属性值

<script>
export default {
   pops:["msg","count"],// pops:{msg:String,count:Number}, 
   setup(props){
       let fn=()=>{console.log(props.msg,props.count)}//必须在组件中注册属性不然setup函数收不到数据
       return {fn}
   }    
}
< /script>

? ? ? ? (2) setup语法糖中获取属性值

<script setup>
    import 	{defineProps} from "./Box.vue"
    //注意Vue3.2之后不用引入可以直接使用
    let obj=defineProps(["msg","count"])
    let fn=()=>{console.log(obj.msg,obj.count)}         
}
< /script>