vue3的小使用技巧

vue3的小使用技巧

最重要的一般我们定义数据的时候要末使用ref， 要末使用reactive，直接定义的只有方法，因为数据需要实时渲染，定义方法常用const ，数据用let 防止报错
Uncaught TypeError: Assignment to constant variable. 报错原因就是因为const 定义数据是定量后期不能修改 ，这个错犯的频率有点高就记录一下

1.1传送门teleport

<div>
    <button @click="modelOpen = true">弹出框</button>
    <teleport to="body"> 
      <div v-if="modelOpen">
        <div>我是弹出的1</div>
        <button @click="modelOpen =false">关闭</button>
      </div>
    </teleport>
  </div>

to 挂载在哪里放在盒子的内部最后面

1.2数据监听watch

数据监听这里可以监听多个
第一个参数是监听的属性值 第二个是个回调函数，里面参数分别是新值旧值

如果是监听reactive中的数据第一个参数必须要以回调的形式，并且返回值不能加括号，写法很重要，不然无效

 watch(type,(newValue, old) => { //用来监听ref中的数据
       console.log(1111,newValue,old)
 });
  watch(()=>type,(newValue, old) => { //监听reactive中的数据 ，回调形式注意这里的type不要加大括号不然监听不到
       console.log(1111,newValue,old)
 });
   watch([()=>type,()=>type2],(newValue, old) => { //监听多个数据，以数组的形式就行，返回的新旧值也是以数组的形式返回
       console.log(newValue,old)
 });

下面这种是监听整个reactive中的数据，这个时候新值旧值是一样的

   watch(data,(newValue, old) => { 
       newValue=old
 });

这是深度监听就不过多讲解了
也可以直接监听data.a.time 效果是一样的
下面是监听data.a

watchEffect监听

首先他跟watch的区别 watch需要你去指定监听哪个属性
而watchEffect则是自动监听所有的属性，并且会自动执行

当内部的监听的属性发生改变就会自动执行，如果内部没有写的数据发生了改变，他不会自动执行的
.

2.1provide,inject 定义变量全局使用

provide跟react 中的提供者相似 用来提供数据，一般用在入口文件
inject就类似于消费者，用来取用数据，哪里用哪里引用，这里举个例子eleplus的全局消息提示框
也可以进行不同组件的数据传递
首先在main.js中定义文件
provide provide(‘注入的属性名’，‘注入的属性值’)可以使用ref(‘注入的属性值’)这样可以动态绑定渲染
inject inject(‘接收的属性名跟注入的一致’)

import {ElMessage} from 'element-plus' //引入提示框
app.use(ElementPlus)//如果没有在全局引用的话就需要在原型上面添加
//app.config.globalProperties.$message = ElMessage;
app.provide('$message', ElMessage) //定义好数据接下来就是在需要用的文件中引入就行

import {inject,onBeforeMount} from 'vue'
 onBeforeMount(() => {
     	inject($message).success('注册成功')   //直接写在生命周期中有效
    });
//下面是没有定义写在非生命周期的方法中，
//注意此时引入inject一定还要在下面定义不然就回报错
 const btnClick=()=>{
	inject($message).success('注册成功') //这里会报错看下图
}
//定义之后的代码,不会报错
const $message=inject("$message")
onBeforeMount(() => {
     	$message.success('注册成功') 
 });
const btnClick=()=>{
	$message.success('注册成功')
}

大致意思就是Inject()只能在setup()或功能组件中使用。我的推断是在方法中需要定义的，在vue的生命周期中可以直接用，没有过多的解释，有深入了解的童鞋可以指正，因此我们一般最好是在前面定义一下，不管生命周期中能不能用