了解vue3.0

vue3.0是2020年09月18日正式发布的。vue3.0版本与其他版本完全不同，它最大限度的减少了开发人员配置工具的次数，另外增添了许多丰富的内置功能，还附带了一个完整的GUI用户创建和管理项目。

生命周期

屏幕截图 2022-04-06 192007.jpg

Fragment

在vue2.x中，template中只允许有一个根节点

<template>
  <div class="home">嘻嘻</div>
  <header>哈哈</header>
  <footer>啦啦</footer>
</template>

屏幕截图 2022-04-06 193914.jpg
在vue3.x中，可以直接写多个根节点

<template>
  <div class="home">啦啦</div>
  <div>哈哈</div>
  <div>嘻嘻</div>
</template>

屏幕截图 2022-04-06 194318.jpg

setup

setup函数是一个新的组件选择。
setup返回的是一个对象，对象的所有属性都可以直接在模板中使用。等同于vue2.x中data函数返回的对象。

<script>
export default {
 setup(){
   return {
     
   }
 }
}
</script>

响应式数据

ref

ref:可传入任意类型的值并返回一个响应式且可改变的ref对象。ref对象拥有一个指向内部值的单一属性.value改变值的时候必须使用.value属性

<template>
  <div class="home">
    <p>姓名:{{name}}</p>
    <button @click="btnFun">修改名称</button>
  </div>
</template>
<script>
import {ref} from 'vue'
export default {
 setup(){
   const name=ref('张三')
   const btnFun=()=>{
     name.value='李四'
   }
   return {
     name,
     btnFun
   }
 }
}
</script>

reactive

reactive:接受一个普通对象然后返回该普通对象的响应式代理。等同于vue2.x的Vue.obserable().
简之:reactive负责复杂数据结构，ref能够把基本的数据结构包装成响应式

<template>
  <div class="home">
    <p>数量:{{obj.num}}</p>
    <button @click="addFun">加加</button>
  </div>
</template>
<script>
import {reactive} from 'vue'
export default {
 setup(){
   const obj=reactive({num:1});
   const addFun=()=>{
     obj.num+=1
   }
   return {
    obj,
    addFun
   }
 }
}
</script>

toRefs

从合成函数返回响应式对象时，toRefs非常有用,这样消费组件就可以在不丢失响应式的情况下对返回的对象进行分散/扩散

<script>
import {reactive,toRefs} from 'vue'
export default {
 setup(){
   const state=reactive({
     a:1,
     b:2
   })
   return  toRefs(state)
   
 }
}
</script>

computed

computed函数：是用来定义计算属性的，计算属性是不能被修改的。

<template>
  <div class="home">
    {{sum}}
  </div>
</template>
<script>
import {ref,computed} from 'vue'
export default {
 setup(){
   const num1=ref(1);
   const num2=ref(2);
   var sum=computed(()=>{
     return num1.value+num2.value
   })
   return {
     sum
   }
   
 }
}
</script>

watchEffect

watchEffect用于自动搜集响应式数据的依赖;
watch需要手动指定侦听的数据源

<template>
  <div class="home">
    {{sum}}
  </div>
</template>
<script>
import {ref,watchEffect} from 'vue'
export default {
 setup(){
   const name=ref("明明");
   const age=ref(23);
   const amendName=()=>{
     name.value='丽丽'
   }
   const amendAge=()=>{
     age.value+=1
   }
   watchEffect(()=>{
     console.log('姓名',name.value);
     console.log('年龄',age.value);
   })
 }
}
</script>

组件通信

props

//父组件
<template>
  <div class="home">
    <Child :name="name"></Child>
  </div>
</template>
<script>
import Child from '../components/Child.vue'
import {ref} from 'vue'
export default {
 setup(){
   const name=ref('张三')
   return {
     name
   }
 },
 components:{
   Child
 }
}
</script>

//子组件  
<template>
    <div>
        子组件
    </div>
</template>
<script>
export default {
    props:{
        name:{
            type:String,
            default:null
        }
    },
    setup(props){
        console.log(props);//父组件传递过来的数据 张三
    }
}
</script>

$emit

//子组件  
<template>
    <div>
        子组件
        <button @click="$emit('fun','hahah')">点击</button>
    </div>
</template>

//父组件
<template>
  <div class="home">
    <Child @fun="func"></Child>
  </div>
</template>
<script>
import Child from '../components/Child.vue'
export default {
 setup(){
   const func=(val)=>{
     console.log(val);//子组件传递过来的数据 hahah
   }
   return {
     func
   }
 },
 components:{
   Child
 }
}
</script>

对比vue2.0的区别

性能比vue2.0强。
更友好的支持兼容TS。
打包更加科学，不会再打包没用到的模块。
Composition API (组合API)。
Fragment,Teleport,Suspense。
Custom Renderer API (自定义渲染API)。

简单了解vue3.0