【vue3】vue3的三种写法（附带provide/inject、toRefs说明、ref，reactive的区别）

写法一（vue3的写法）

<template><HelloWorld /><h1>{{ a3 }}</h1><h1>{{ b3 }}</h1></template><script>importHelloWorld from "./components/HelloWorld.vue";import{ ref, provide, readonly, reactive, toRefs } from "vue";exportdefault{
  name:"App",
  components:{
    HelloWorld,},setup(){const a3 =ref("1000");const obj3 =reactive({// 建立响应式映射
      b3:'bbb'})provide("a3",readonly(a3));// readonly设置provide指定属性名为只读provide("obj3", obj3);setTimeout(()=>{
      a3.value ="2000";
      obj3.b3 ="bbbbbb";},3000);return{// 返回值给到setup
      a3,...toRefs(obj3)// 结构reactive内的对象属性，具体作用参考下面的截图};},};</script>

toRefs定义：

toRefs可以将对象（只能接收rective对象）中的属性变成响应式。

正常reactive对象数据也是响应式的，如果用toRefs解构出去会更加方便。

toRefs什么时候用？

数据量如果很多， 我们一般会用解构来简化代码， 那么在vue3 中如果使用对象的解构， 会让改对象失去响应式， 所有一般解构的时候 借助 toRefs 来解构仍然带有响应式。

解构后， 我们就不需要 用 对象

.

属性了， 而是可以直接使用属性，来简化。

<h3>{{name}}</h3>

let obj =reactive({ name:'kebi'})return{...toRefs(obj)}

写法二（vue2的写法）

扩展：Vue使用

provide

各种传值后

inject

获取

undefined

的问题及解决

vue2

的写法是函数式写法，如果以

vue3

的写法例如：

// 父组件mounted(){provide("obj3", obj3);}

// 子组件mounted(){const list =inject('list');}

则会产生

inject

获取后打印log

undefined

这个问题，解决办法是写成函数式的，如下：

<template><div><div>Son1的msg:{{ msg }}</div><Son2></Son2></div></template><script>importSon2 from './Son2.vue';import{ inject, provide, readonly } from 'vue';exportdefault{
  name:'Son1',
  components:{
    Son2,},data(){return{
      sMsg:'',}},provide(){return{
      msg:readonly(inject('msg')+'->son1'),}},
  inject:['msg'],mounted(){// this.sMsg = inject('msg') + '->son1';// console.log('this.sMsg', this.sMsg)}};</script>

写法三（vue3的写法）

父组件provide/inject

<template><!-- child component --><child-components></child-components><!-- parent component --><div class="child-wrap input-group"><input
      v-model="value"
      type="text"class="form-control"
      placeholder="Please enter"/><div class="input-group-append"><button @click="handleAdd"class="btn btn-primary" type="button">
        add
      </button></div></div></template><script setup>import{ ref, provide } from 'vue'importChildComponents from './child.vue'const list =ref(['JavaScript','HTML','CSS'])const value =ref('')// Provide data to child components.provide('list', list.value)// event handling function triggered by addconst handleAdd =()=>{
      list.value.push(value.value)
      value.value =''}</script>

子组件provide/inject

<template><ul class="parent list-group"><li class="list-group-item" v-for="i in list":key="i">{{ i }}</li></ul></template><script setup>import{ inject } from 'vue'// Accept data provided by parent componentconst list =inject('list')</script>

ref，reactive的区别：