Vue3 学习教程学习笔记

最新推荐文章于 2024-05-23 22:55:00 发布

飞天巨兽

最新推荐文章于 2024-05-23 22:55:00 发布

阅读量385

点赞数

分类专栏： vue 文章标签： vue javascript vue.js 前端

本文链接：https://blog.csdn.net/qq_41538165/article/details/123174985

版权

vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

shallowReactive 与 shallowRef

readonly 与 shallowReadonly

前言

主要做一些Vue3的学习笔记，方便后续查找。查缺补漏

提示：以下是本篇文章正文内容，下面案例可供参考

环境搭建

## 安装或者升级
npm install -g @vue/cli
## 保证 vue cli 版本在 4.5.0 以上
vue --version
## 创建项目
vue create my-project

setup

新的option, 所有的组合API函数都在此使用, 只在初始化时执行一次

执行时机

在beforeCreate之前执行(一次), 此时组件对象还没有创建。this是undefined, 不能通过this来访问data/computed/methods / props

返回值

一个对象，用于模板的属性和方法。会与data、methods合并，setup优先级高。

参数

setup(props, context) / setup(props, {attrs, slots, emit})

import Child from "./Child.vue";
import { defineComponent, ref, reactive } from "vue";
export default defineComponent({
  name: "HomeView",
  components: {
    Child,
  },
setup() {
  const count = ref(1);
  function update() {
    count.value++;
  }
  // 返回一个proxy的代理对象，被代理的是里面的对象
  const user = reactive({
    name: "小明",
    age: 18,
  });
  const update2 = () => {
    user.name += "++";
  };
  return {
    count,
    update,
    user,
    update2,
  };
},
});

ref

定义一个数据的响应式，用来处理基本类型数据（也可以使用对象，要.value）。

reactive

定义多个数据的响应式，用来处理对象(递归深度响应式)。

计算属性与监视

computed函数
watch函数
watchEffect函数

import { defineComponent, reactive, computed, watch, watchEffect } from "vue";
export default defineComponent({
  name: "HomeView",
  components: {},
  setup() {
    const user = reactive({
      firstName: 'A',
      lastName: 'B'
    })
    const fullName1 = computed(()=>{
      console.log('fullName1');
      return user.firstName + '--' + user.lastName;
    })
    const fullName2 = computed({
      get () {
        console.log('fullName2 get')
        return user.firstName + '-' + user.lastName
      },

      set (value: string) {
        console.log('fullName2 set')
        const names = value.split('-')
        user.firstName = names[0]
        user.lastName = names[1]
      }
    })
    watch(user, ({firstName, lastName})=>{
      console.log(firstName, lastName, 1111)
    },{
      immediate: true,  // 是否初始化立即执行一次, 默认是false
      deep: true, // / 是否是深度监视, 默认是false
    });
    /*
      watch多个数据: 
      使用数组来指定
      如果是ref对象, 直接指定
      如果是reactive对象中的属性,  必须通过函数来指定
    */
    watch([() => user.firstName, () => user.lastName, fullName2], (values) => {
      console.log('监视多个数据', values)
    })
    watchEffect(()=>{
      console.log(user.firstName, user.lastName, 2222)
    });// 不需要指定对象，默认带有immediate
    return {
      user,
      fullName1,
      fullName2
    };
  },
});
</script>

生命周期

vue3 对比 vue2生命周期：

beforeCreate -> 使用 setup()
created -> 使用 setup()
beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed -> onUnmounted
errorCaptured -> onErrorCaptured

import { defineComponent, onMounted, onUpdated, onUnmounted, onBeforeMount, onBeforeUpdate, onBeforeUnmount } from "vue";
export default defineComponent({
  name: "HomeView",
  setup() {
    onBeforeMount(() => {
      console.log('--onBeforeMount')
    })
    onMounted(() => {
      console.log('--onMounted 可以放些异步请求')
    })
    onBeforeUpdate(() => {
      console.log('--onBeforeUpdate')
    })
    onUpdated(() => {
      console.log('--onUpdated')
    })
    onBeforeUnmount(() => {
      console.log('--onBeforeUnmount')
    })
    onUnmounted(() => {
      console.log('--onUnmounted')
    })
    return {}
  }
});

toRefs

把一个响应式对象转换成普通对象，该普通对象的每个 property 都是一个 ref

function useReatureX() {
  const state = reactive({
    foo2: 'a',
    bar2: 'b',
  })

  setTimeout(() => {
    state.foo2 += '++'
    state.bar2 += '++'
  }, 2000);

  return toRefs(state)
}

ref

获取组件中的标签元素

const inputRef = ref<HTMLElement|null>(null)

shallowReactive 与 shallowRef

shallowReactive : 只处理了对象内最外层属性的响应式(浅响应式)。与reactive类似；
shallowRef：只处理了value的响应式, 不进行对象的reactive处理。与ref类似；

区别：reactive与ref实现的是深度响应式, 而shallowReactive与shallowRef是浅响应式。