Vue3基础知识

一、基础知识

1、vue3 可以没有根标签

image.png

2、组合式 API

(1) setup

组件用到的数据，方法，计算数据，生命周期，都写在setup里面
如果重名，setup 优先，
vue2可以访问到 vue 3 setup中的属性和方法
vue3的setup里面不能访问到vue2的data、methos等（因为this的指向变了）
setup执行比beforeCreate要早。this是 undefined

使用setup 时，它将接收两个参数：props 和 context 。

props:

第一个参数是 props ，表示父组件给子组件传值，props 是响应式的，当传入新的 props 时，自动更新。因为 props 是响应式的，不能使用 ES6 解构，会消除prop的响应特性，此时需要借用 toRefs 解构

<template>
    <div>
        子组件 ----
       <div>
           {{msg}}  {{height}}
       </div>
    </div>
</template>
<script>
import { ref, reactive, h, onMounted,toRefs} from "vue";
export default {
    props: {
    msg: String,
    height: Number,
    },
    setup(props,context) {
        let { msg , height } = toRefs(props)
        console.log(msg.value)
        console.log(height.value)
        onMounted(()=>{
            console.log('页面加载时')
        })
        return {
        }
    },
}
</script>

**context **

context 上下文环境，其中包含了属性、插槽、自定义事件三部分。

setup(props,context){
 const { attrs,slots,emit } = context
 // attrs 获取组件传递过来的属性值，
 // slots 组件内的插槽
 // emit 自定义事件 子组件
}

1、attrs 是一个非响应式对象，主要接收 no-props 属性，经常用来传递一些样式属性。
2、slots 是一个 proxy 对象，其中 slots.default() 获取到的是一个数组，数组长度由组件的插槽决定，数组内是插槽内容。
3、setup 内不存在this，所以 emit 用来替换之前 this.$emit 的，用于子传父时，自定义事件触发。

(2) ref 函数 (基础数据响应式)（全名：reference）

js中操作数据需要 .value去获取
模板中读取数据不需要 .value
接收的数据是基本类型，也可以是对象类型。对象类型需要.value
响应式依然是靠 object.defineProperty()的get与set完成的

<template>
  <div class="home">
    名字：{{name}}
    <button @click="changName">改变名字</button>
  </div>
</template>


<script>
  import {ref,reactive,h} from 'vue'
  export default {
    setup(){
      let name = ref('张三')
      function changName(){
        name.value = '李四'
      }
      return {
        name,
        changName
      }
      // return ()=> h('h1','返回一个渲染函数')
    }
  }
</script>

(3) reactive 函数 (对象数组响应式)

接收一个对象或者数组
reactive定义的响应式数据是深层次的
语法：const 代理对象 = reactive(源对象)，返回一个代理对象（Proxy的实例对象,，简称：proxy对象）
基于es6的proxy实现，

<template>
  <div class="home">
    名字：{{ name }} 
    <br>
    工作：{{ job.type }} 
     <br>
    工资：{{ job.salary }}
     <br>
    <button @click="changName">改变名字</button>
  </div>
</template>
<script>
import { ref, reactive, h } from "vue";
export default {
  setup() {
    let name = ref("张三");
    let job = reactive({
      type: "前端",
      salary: "20k",
    });

    function changName() {
      name.value = "李四";
      job.type = "UI";
      job.salary = "10k";
    }
    return {
      name,
      job,
      changName,
    };
  },
};
</script>

[图片上传失败...(image-570d9b-1714965888956)]

(4) toRefs 和 toRef

toRef: 复制 reactive 里的单个属性并转成 ref
toRefs: 复制 reactive 里的所有属性并转成 ref

(5) unref

unref() 如果参数是一个ref则返回它的value，否则返回参数本身
unref(val) 相当于val=isRef(val)?val.value:val

3、生命周期

   vue2            ---------------        vue3
beforeCreate                         ->   setup()
Created                              ->   setup()
beforeMount                          ->   onBeforeMount
mounted                              ->   onMounted
beforeUpdate                         ->   onBeforeUpdate
updated                              ->   onUpdated
beforeDestroyed                      ->   onBeforeUnmount
destroyed                            ->   onUnmounted
activated                            ->   onActivated
deactivated                          ->   onDeactivated

最后编辑于：2024.05.06 15:08:44