vue3学习笔记

生命周期：

vue2：                                     vue3：

beforeCreate( 创建前 )              Not

created ( 创建后）                     Not                 

beforeMount (挂载前)              onBeforeMount（setup还在此之前）

mounted(挂载后)                      onMounted

beforeUpdate (更新前)             onBeforeUpdate

updated (更新后)                      onUpdated

beforeUnmount （销毁前）     onBbeforeUnmount 

unmounted （销毁后）              onUnmounted

 

变量定义：

vue2实在data中定义

vue3：

setup(){
    // 此处定义的变量是非响应式的
    let testData = {
      name:'test',
      age:19
    }
    //使用ref则是响应式写法
    let testNum = ref(888)
    // 仅仅是ref的话是不完善的，对象和数组最好是使用reactive
    let testDataText = reactive(
      {
        name:'test',
        age:19
      }
    )
    let dataChange = ()=>{
      // 对于数据的操作徐使用value来进行
      testNum.value = 20;
      // 而对于使用reactive定义的变量，则不需要value可以直接操作
      testDataText.name = 'testName'
    }
    // 除此之外还需要return出来，不然html模板中是不能使用的
    return {
      testData,testNum,testDataText
    }
  }

　　vue3中的toRef和toRefs:

setup(){
    let testData = {
      name:'test',
      age:19
    }
    //使用toRef可以使其变为响应式但是UI页面上面并不会更新，可以在控制台打印
    let testNum = toRef(testData,'age' )
    // 如果想使其在UI页面上也会更新，就要使用toRefs
    let testDataText = toRefs(testData )
    let dataChange = ()=>{
      // 对于数据的操作徐使用value来进行
      testNum = 20;
      // 需要注意的是toRefs是将多个转化为响应式和toRef稍有不同
      testDataText.name = 'testName'
      console.log(testNum,testDataText)
    }
    // 也可以直接在return中使用toRefs，需要注意的是在UI页面中testData是无法读取的，直接使用name和age即可
    //对于页面数据比较多的情况下也可以使用data定义整个变量，然后toRefs出来
    //需要注意的是toRefs只能针对单层级对象和数组使用不能使用多层嵌套
    return {
      testData,testNum,testDataText,...toRefs(testData)
    }
  }        

监听数据变化

vue2中监听数据变化有computed和watch

vue3有computed，watch，watchEffect

setup({
   let testData = rective({
      name:"test",age:19,sex:'man'    
   }) 
   //computed:有两种写法
   let names01 = computed({
　　　　get(){
　　　　　　return 'first name' + testData.name;
　　　　},
　　　　set(value){
　　　　　　//names数据发生变化时触发
　　　　}
　　})
　　let names02 = computed()=>{
　　　　return 'first name' + testData.name;
　　}

　　//watch,可以同时监听多个数据
　　let age = watch(testData.age,(newValue,oldValue)=>{
　　　　console.log(oldValue,newValue)
　　},{immediate:true,deep:true})
      //上面的方法控制台可能会有警告，因为只适合监听ref定义的数据，rective定义的如下
      watch([()=>testData.sex],(newValue,oldValue)=>{             
          console.log(newValue,oldValue) })
      )
    //watchEffect类似于computed，但是只能获取到new的值，old的值获取不到
    watchEffect(()=>{
        const sex= testData.sex
        console.log(sex)
    })
})    

　　

vue文件拆分（vue，scss，ts）引入

在vue2中，在data中定义完数据后在html部分就可以直接用了，因为data 的时候就替我们return啦（具体原理不展开）

但是vue3，setup里面定义完数据后需要我们再手动的去return一遍，对于数据量比较大的页面来说就会很痛苦

庆幸的是我们可以在script的地方直接设置setup：

我们可以在标签里面直接使用setup，这样就避免了在此return的烦恼
<script lang="ts" setup></script>
但是setup不支持src引入，即：
<script lang="ts" setup src="index.ts"></script>
这样是会报错的

如果你代码量比较大，使用拆分而且又不想return，那么我们只能使用一种拆分方式：
vue = vue + html + scss
其中

vue：
<template src="./index.html"></template>
<script lang="ts" setup></script>
<style lang="scss">
@import './index.scss'
</style>

html和scss直接写就可以了