冰雪为融的博客

在上一篇文章中，我们初步了解了vue3的新特性，今天，我们将延续Composition API的话题，来了解Composition API带来的新特性：ref、toRef和toRefs。下面开始进入本文的讲解✨一、????如何理解ref、toRef和toRefs1、ref、toRef和toRefs是什么（1）ref1）ref是什么ref可以生成值类型（即基本数据类型） 的响应式数据； ref可以用于模板和reactive； ref通过.value来修改值（一...

学习笔记记录（内容来源于官网）watchvue3watch用法和vue变化也不是特别大，vue3支持侦听多个数据源用法没太大变化：wach是一个钩子函数，支持传入三个参数（个人理解）1、监听对象2、回调函数（可以拿到当前值，和上一次的值）3、对象：是否深度监控属性变化等{deep:true}// 侦听一个 getterconst state = reactive({ count: 0 })watch( () => state.count, (count, pr

学习笔记记录（内容来源于官网）computedvue3 计算属性和vue2变化不大，只需要注意，它返回的是一个响应式的ref对象,所以在使用的时候需要.value(模板中使用不需要，会自动展开)const count = ref(1)const plusOne = computed(() => count.value++)console.log(plusOne.value) // 2plusOne.value++ // error也支持通过set和get创建可写的ref对象

官网vue3-setup总结：1、setup 函数时，它将接受两个参数：（props、context(包含attrs、slots、emit)）2、setup函数是处于 生命周期函数 beforeCreate 和 Created 两个钩子函数之间的函数3、执行 setup 时，组件实例尚未被创建（在 setup() 内部，this 不会是该活跃实例的引用，即不指向vue实例，Vue 为了避免我们错误的使用，直接将 setup函数中的this修改成了 undefined）4、与模板一起使用：

vue3props 要先声明才能取值，attrs不用声明直接使用（$attrs 包含 class and style attribute）props 不包含事件，attrs包含props 支持 String 以外的类型，attrs只有 String 类型props 没有声明的属性，会在 attrs 里，若在 props 内声明了该属性，那么 attrs 里就不会出现该属性vue2与vue3的不同包含所有父作用域的绑定 (class 和 style 除外)props 不包含事件，attrs

2020 年一月又注：RFC 已经被完全重写，最新版本请以https://composition-api.vuejs.org/为准。以下内容会有部分与最新的 API 有出入，但依然可以帮助理解。---译注：这是 3.0 最重要的 RFC，因此特意翻译成中文。概要将 2.x 中与组件逻辑相关的选项以 API 函数的形式重新设计。基本例子import { ref, computed, watch, onMounted } from 'vue'const App = { te..

reactive的用法与ref的用法相似，也是将数据变成响应式数据，当数据发生变化时UI也会自动更新。不同的是ref用于基本数据类型，而reactive是用于复杂数据类型，比如对象和数组例如：定义一个对象类型的变量user<template><div><p>{{ user }}</p><button @click="increase">click me! one year later</button>...

vue3.0 ------ createApp()在2.X版本中创建一个vue 实例是通过 new Vue()来实现的，到了3.X中则是通过使用createApp这个 API返回一个应用实例，并且可以通过链条的方式继续调用其他的方法参数components optionsroot props例如：我在main.js中定义了username，之后整个项目中，都可以props接收username，并使用...