VUE3基础

初识vue3

目前vue2和vue3在市面上，平分秋色

优点

1. 性能提升了1.5倍
2. 体积更小
3. 与TS更契合，ts就是规范版的js
4. 更好支持了其它ui插件
5. 适合前端学习，组合式API，函数式编程

2.0 采用 options API，每一个内容都对应一个选项，data，methods
3.0 采用 composition API，函数式编程，所有东西写在一块儿

第一次使用

npm i @vue/cli -g
vue create demo

<template>
  <div class="home">
    {{ num }}
  </div>
</template>

<script>
//注意引用加{}
import {ref} from 'vue';

export default {
  setup(){
    let num=ref(1);
    
    return{
      num
    }
  }
}
</script>

声明变量的三种方式

1. ref用来声明简单类型的变量
2. relative用来声明复杂类型的变量
3. toRefs用来将复杂类型的变量变成简单类型的变量

注意：无论变量还是方法，都需要return

<template>
  <div class="home">
    {{ num }}
    <button @click="add">+1</button>
    <br>
    {{ name }} 的年龄 {{ age }},
  </div>
</template>

<script>
//注意引用加{}
import {reactive, ref ,toRefs} from 'vue';

export default {
  setup(){
    let num=ref(1);
    let user=reactive({
      name:"jack",
      age:19
    });
    let add=()=>{
      num.value+=1,
      user.age+=1
    }
    return{
      num,
      add,
      // relative声明的变量
      // user
      // 在此处套用toRefs，声明变量
      ...toRefs(user)
    }
  }
}
</script>

computed

记得引用，赋值给一个变量并return，插值表达式使用即可

    let fn1=computed(()=>{
      return num1.value+=2
    })

watch

    watch(num,(newVal,oldVal)=>{
      console.log(newVal,oldVal)
    })

留言板案例

<template>
    <div>
        <p>标题：<input type="text" v-model="title"></p>
        <p>内容：<input type="text" v-model="content"></p>
        <p>搜索：<input type="text" v-model="char"></p>
        <p><button @click="add">添加</button></p>
        <ul>
            <li v-for="(item,index) in newList" :key="index">
                {{ item.title }}--{{ item.content }}
            </li>
        </ul>
    </div>
</template>
    
<script>
import {ref,reactive,toRefs, computed} from 'vue'
export default{
    setup() {
        let title=ref("")
        let content=ref("")
        let char=ref("")
        let list=reactive([
            {title:1,content:"11111"},
            {title:2,content:"22222"},
            {title:3,content:"33333"},
            {title:4,content:"44444"}
        ])
        let add=()=>{
            list.push({
                title:title.value,
                content:content.value
            })
        }
        let newList=computed(()=>{
            return list.filter(item=>item.content.includes(char.value))
        })
        return {
            title,
            content,
            list,
            add,
            newList,
            char
        }
    },
}
</script>
    
<style>
    
</style>

生命周期

1、setup() : 开始创建组件之前，在 beforeCreate 和 created 之前执行，创建的是 data 和 method
2、onBeforeMount() : 组件挂载到节点上之前执行的函数；
3、onMounted() : 组件挂载完成后执行的函数；
4、onBeforeUpdate(): 组件更新之前执行的函数；
5、onUpdated(): 组件更新完成之后执行的函数；
6、onBeforeUnmount(): 组件卸载之前执行的函数；
7、onUnmounted(): 组件卸载完成后执行的函数；
8、onActivated(): 被包含在 <keep-alive> 中的组件，会多出两个生命周期钩子函数，激活时执行
9、onDeactivated(): 比如从 A 组件，切换到 B 组件，A 组件消失时执行；
10、onErrorCaptured(): 当捕获一个来自子孙组件的异常时激活钩子函数。

vue2           ------->      vue3
 
beforeCreate   -------->      setup(()=>{})
created        -------->      setup(()=>{})
beforeMount    -------->      onBeforeMount(()=>{})
mounted        -------->      onMounted(()=>{})
beforeUpdate   -------->      onBeforeUpdate(()=>{})
updated        -------->      onUpdated(()=>{})
beforeDestroy  -------->      onBeforeUnmount(()=>{})
destroyed      -------->      onUnmounted(()=>{})
activated      -------->      onActivated(()=>{})
deactivated    -------->      onDeactivated(()=>{})
errorCaptured  -------->      onErrorCaptured(()=>{})

组件通信