Vue3基础常用API(setup、setup两个注意点、ref函数、reactive函数、Vue3.0中的响应式原理、reactive对比ref)(一)

已于 2022-10-27 22:38:54 修改
阅读量530 收藏 1
点赞数
分类专栏： # vue 文章标签： javascript vue.js 前端 vue3 前端框架
于 2022-10-05 14:00:41 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_48617322/article/details/127098330
版权

系列文章目录

vue2相关文章

第二章：Vue3基础常用API(computed函数、watch函数、watchEffect函数、生命周期、hook函数、toRef与toRefs)(二)
第三章:Vue3其他API(shallowReactive 与 shallowRef、readonly 与 shallowReadonly、toRaw 与 markRaw、customRef……)(三)

文章目录

一、Vue3带来了什么

1.性能的提升
• 打包大小减少41%
• 初次渲染快55%, 更新渲染快133%
• 内存减少54%
…
2.源码的升级
• 使用Proxy代替defineProperty实现响应式
• 重写虚拟DOM的实现和Tree-Shaking
…
3.拥抱TypeScript
• Vue3可以更好的支持TypeScript
4.新的特性
1. Composition API（组合API）
○ setup配置
○ ref与reactive
○ watch与watchEffect
○ provide与inject
○ …
2. 新的内置组件
○ Fragment
○ Teleport
○ Suspense
3. 其他改变
○ 新的生命周期钩子
○ data 选项应始终被声明为一个函数
○ 移除keyCode支持作为 v-on 的修饰符
○ …

二、创建挂载应用实例

每个 Vue 应用都是通过 createApp 函数创建一个新的 应用实例：
main.js

//引入的不再是Vue构造函数了，引入的是一个名为createApp的工厂函数
import { createApp } from 'vue'
import App from './App.vue'

//创建应用实例对象——app(类似于之前Vue2中的vm，但app比vm更“轻”)
const app = createApp(App)

//挂载
app.mount('#app')

二、常用 Composition API

1.setup

  • 理解： Vue3.0中一个新的配置项，值为一个函数。
  • 组件中所用到的： 数据、方法等等，均要配置在setup中。
  • setup函数的两种返回值：
    1. 若返回一个对象，则对象中的属性、方法, 在模板中均可以直接使用。（重点关注！）
    2. 若返回一个渲染函数：则可以自定义渲染内容。（了解）
  • 注意点：
    1. 尽量不要与Vue2.x配置混用
      • Vue2.x配置（data、methos、computed…）中可以访问到setup中的属性、方法。
      • 但在setup中不能访问到Vue2.x配置（data、methos、computed…）。
      • 如果有重名, setup优先。
    2. setup不能是一个async函数，因为返回值不再是return的对象, 而是promise, 模板看不到return对象中的属性。（后期也可以返回一个Promise实例，但需要Suspense和异步组件的配合）

代码示例：

<template>
  <h1>一个人的信息</h1>
  <h2>姓名：{{ name }}</h2>
  <h2>年龄：{{ age }}</h2>
  <h2>性别：{{ sex }}</h2>
  <h2>a的值是：{{ a }}</h2>
  <button @click="sayHello">说话(Vue3所配置的——sayHello)</button>
  <br />
  <br />
  <button @click="sayWelcome">说话(Vue2所配置的——sayWelcome)</button>
  <br />
  <br />
  <button @click="test1">测试一下在Vue2的配置中去读取Vue3中的数据、方法</button>
  <br />
  <br />
  <button @click="test2">
    测试一下在Vue3的setup配置中去读取Vue2中的数据、方法
  </button>
</template>

<script>
// import {h} from 'vue'
export default {
  name: "App",
  data() {
    return {
      sex: "男",
      a: 100,
    };
  },
  methods: {
    sayWelcome() {
      alert("欢迎来到天安门");
    },
    test1() {
      console.log(this.sex);
      console.log(this.name);
      console.log(this.age);
      console.log(this.sayHello);
    },
  },
  //此处只是测试一下setup，暂时不考虑响应式的问题。
  setup() {
    //数据
    let name = "张三";
    let age = 18;
    let a = 200;

    //方法
    function sayHello() {
      alert(`我叫${name}，我${age}岁了，你好啊！`);
    }
    function test2() {
      console.log(name);
      console.log(age);
      console.log(sayHello);
      console.log(this.sex);
      console.log(this.sayWelcome);
    }

    //返回一个对象（常用）
    return {
      name,
      age,
      sayHello,
      test2,
      a,
    };

    //返回一个函数（渲染函数）
    // return ()=> h('h1','尚硅谷')
  },
};
</script>

运行结果：
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2.setup的两个注意点

1.setup执行的时机

  • 在beforeCreate之前执行一次，this是undefined。

2.setup的参数

  • props： 值为对象，包含：组件外部传递过来，且组件内部声明接收了的属性。
  • context： 上下文对象，包含属性如下
    • attrs: 值为对象，包含：组件外部传递过来，但没有在props配置中声明的属性, 相当于 this.$attrs。
    • slots: 收到的插槽内容, 相当于 this.$slots。
    • emit: 分发自定义事件的函数, 相当于 this.$emit 。

代码示例：
App.vue

<template>
  <Demo @hello="showHelloMsg" msg="你好啊" school="你猜">
    <template v-slot:qwe>
      <span>北京</span>
    </template>
    <template v-slot:asd>
      <span>天安门</span>
    </template>
  </Demo>
</template>

<script>
import Demo from "./components/Demo";
export default {
  name: "App",
  components: { Demo },
  setup() {
    function showHelloMsg(value) {
      alert(`你好啊，你触发了hello事件，我收到的参数是:${value}！`);
    }
    return {
      showHelloMsg,
    };
  },
};
</script>

Demo.vue

<template>
  <h1>一个人的信息</h1>
  <h2>姓名：{{ person.name }}</h2>
  <h2>年龄：{{ person.age }}</h2>
  <h2><slot name="qwe"></slot></h2>
  <h2><slot name="asd"></slot></h2>
  <button @click="test">测试触发一下Demo组件的Hello事件</button>
</template>

<script>
import { reactive } from "vue";
export default {
  name: "Demo",
  props: ["msg"],
  emits: ["hello"],
  setup(props, context) {
    console.log("setup---props", props);
    console.log("setup---context", context);
    console.log("setup---context.attrs", context.attrs); //相当与Vue2中的$attrs
    console.log("setup---context.emit", context.emit); //触发自定义事件的。
    console.log("setup---context.slots", context.slots); //插槽
    //数据
    let person = reactive({
      name: "张三",
      age: 18,
    });

    //方法
    function test() {
      context.emit("hello", 666);
    }

    //返回一个对象（常用）
    return {
      person,
      test,
    };
  },
};
</script>

运行结果：
在这里插入图片描述

3.ref函数

• 作用: 定义一个响应式的数据
• 语法: const xxx = ref(initValue)
○ 创建一个包含响应式数据的引用对象（reference对象，简称ref对象）。
○ JS中操作数据： xxx.value
○ 模板中读取数据: 不需要.value，直接：<div>{{xxx}}</div>
• 备注：
○ 接收的数据可以是： 基本类型、也可以是对象类型。
○ 基本类型的数据：响应式依然是靠Object.defineProperty()的get与set完成的。
○ 对象类型的数据：内部 “ 求助 ” 了Vue3.0中的一个新函数—— reactive函数。
代码示例：

<template>
	<h1>一个人的信息</h1>
	<h2>姓名：{{name}}</h2>
	<h2>年龄：{{age}}</h2>
	<h3>工作种类：{{job.type}}</h3>
	<h3>工作薪水：{{job.salary}}</h3>
	<button @click="changeInfo">修改人的信息</button>
</template>

<script>
	import {ref} from 'vue'
	export default {
		name: 'App',
		setup(){
			//数据
			let name = ref('张三')
			let age = ref(18)
			let job = ref({
				type:'前端工程师',
				salary:'30K'
			})

			//方法
			function changeInfo(){
				// name.value = '李四'
				// age.value = 48
				console.log(job.value)
				job.value.type = 'UI设计师'
				job.value.salary = '60K'
				// console.log(name,age)
			}

			//返回一个对象（常用）
			return {
				name,
				age,
				job,
				changeInfo
			}
		}
	}
</script>

运行结果：
修改前：
在这里插入图片描述
修改后：
在这里插入图片描述

4.reactive函数

• 作用: 定义一个对象类型的响应式数据（基本类型不要用它，要用ref函数）
• 语法： const 代理对象= reactive(源对象)接收一个对象（或数组），返回一个代理对象（Proxy的实例对象，简称proxy对象）
• reactive定义的响应式数据是“深层次的”。
内部基于 ES6 的 Proxy 实现，通过代理对象操作源对象内部数据进行操作。

代码示例：

<template>
  <h1>一个人的信息</h1>
  <h2>姓名：{{ person.name }}</h2>
  <h2>年龄：{{ person.age }}</h2>
  <h3>工作种类：{{ person.job.type }}</h3>
  <h3>工作薪水：{{ person.job.salary }}</h3>
  <h3>爱好：{{ person.hobby }}</h3>
  <h3>测试的数据c：{{ person.job.a.b.c }}</h3>
  <button @click="changeInfo">修改人的信息</button>
</template>

<script>
import { reactive } from "vue";
export default {
  name: "App",
  setup() {
    //数据
    let person = reactive({
      name: "张三",
      age: 18,
      job: {
        type: "前端工程师",
        salary: "30K",
        a: {
          b: {
            c: 666,
          },
        },
      },
      hobby: ["抽烟", "喝酒", "烫头"],
    });

    //方法
    function changeInfo() {
      person.name = "李四";
      person.age = 48;
      person.job.type = "UI设计师";
      person.job.salary = "60K";
      person.job.a.b.c = 999;
      person.hobby[0] = "学习";
    }

    //返回一个对象（常用）
    return {
      person,
      changeInfo,
    };
  },
};
</script>

运行结果：
修改前：
在这里插入图片描述
修改后：
在这里插入图片描述

5.Vue3.0中的响应式原理

vue2.x的响应式

  • 实现原理：

    • 对象类型：通过Object.defineProperty()对属性的读取、修改进行拦截（数据劫持）。

    • 数组类型：通过重写更新数组的一系列方法来实现拦截。（对数组的变更方法进行了包裹）。

      Object.defineProperty(data, 'count', {
    get () {}, 
    set () {}
})

  • 存在问题：

    • 新增属性、删除属性, 界面不会更新。
    • 直接通过下标修改数组, 界面不会自动更新。
Vue3.0的响应式

6.reactive对比ref

  • 从定义数据角度对比：
    • ref用来定义：基本类型数据
    • reactive用来定义：对象（或数组）类型数据。
    • 备注：ref也可以用来定义对象（或数组）类型数据, 它内部会自动通过reactive转为代理对象。
  • 从原理角度对比：
    • ref通过Object.defineProperty()的get与set来实现响应式（数据劫持）。
    • reactive通过使用Proxy来实现响应式（数据劫持）, 并通过Reflect操作源对象内部的数据。
  • 从使用角度对比：
    • ref定义的数据：操作数据需要.value，读取数据时模板中直接读取不需要.value。
    • reactive定义的数据：操作数据与读取数据：均不需要.value。
Nyingchi-X
关注
专栏目录
Vue3通透教程【五】Vue3中的响应式数据 reactive函数、ref函数
官方推荐
02-23 4万+
Vue3中的响应式数据
vue3 ---＞ setup() 用法 响应式API - reactive 响应式API - ref
qq_43944285的博客
05-27 987
setup() 介绍 参考官方文档 使用 setup 函数时，它将接收两个参数： props context //让我们更深入地研究如何使用每个参数 Props setup 函数中的第一个参数是 props。正如在一个标准组件中所期望的那样，setup 函数中的 props 是响应式的，当传入新的 prop 时，它将被更新。 Context 传递给 setup 函数的第二个参数是 context。context 是一个普通 JavaScript 对象，暴露了其它可能在 setup 中有用的值： 访问组件的
vue3的setup，ref以及reactive
weixin_47268588的博客
11-10 295
vue3的setup，ref以及reactive
vue3-ref和reactive
qq_52135740的博客
08-02 679
ref 作用: 定义一个响应式的数据 语法: const xxx = ref(initValue) 创建一个包含响应式数据的引用对象（reference对象，简称ref对象）。 JS中操作数据： xxx.value 模板中读取数据: 不需要.value，直接：<div>{{xxx}}</div> 备注： 接收的数据可以是：基本类型、也可以是对象类型。 基本类型的数据：响应式依然是靠Object.defineProperty()的get与set完成的。 对象类型的数据：内部
Vue3从零开始——掌握setup、ref和reactive函数的奥秘
最新发布
weixin_73588491的博客
08-07 4355
在 Vue 3 中，引入了组合式 API（Composition API），这使得开发者可以更灵活地组织代码逻辑，并提升了组件的复用性和可维护性。相比于 Vue 2 中的选项式 API，组合式 API 提供了一种更具功能性的方式来构建应用。主要优点：逻辑复用和组织：通过组合函数可以更清晰地组织代码逻辑，避免在生命周期函数中写大量逻辑。更好的 TypeScript 支持：组合式 API 天然地支持 TypeScript，这使得类型推断和类型检查变得更加轻松。性能优化。
vue3 setup reactive
qq_39750019的博客
07-13 158
1.html 2. 红色边框里的内容就可以提取出来 还可以 computed
vue3常用的API
qq_55928824的博客
03-07 1382
vue3常用的API(ref,reactive,computed,watch)
Vue3之setup()、reactive、ref
知识应该共享，创造才应收费
05-13 1028
在Vue3中，将Vue2.0的option API 制作成hook函数，比如`watch,compute`方法等，在Vue3中新增的`setup()`方法中，可以以函数的形式去使用Vue2.0的`watch，compute`等属性，`setup`函数的调用时机是创建组件实例，然后初始化`props`,紧接着是调用`setup`函数，从生命周期的角度来看，它会在`beforeCreate`之前调用，所以在`setup`函数内是拿不到上下文对象的，它创建的是`data`和`method`.Vue3
Vue3.0——面试题、常用的Composition API（setup、ref函数、reactive函数、Vue3.0中的响应式原理、Vue3.0中组件的使用、计算属性 ）
qq_52301431的博客
09-16 1191
写在Vue3.0的setup函数内部。
Vue3.0数据响应式原理详解
10-16
在Vue3中，响应式系统的实现主要依赖于ES6的`Proxy`和`Reflect`对象，这两个新特性使得Vue能够更加精细地监控数据的变化。 1. **ES6 Proxy**: `Proxy`允许我们创建一个代理对象，该对象可以拦截和控制对原始对象的...
Vue.js 3.0的Composition API中的三个创建响应式数据的函数reactive、toRefs、ref
前端高薪进击手记
07-29 1177
本文将介绍Vue.js 3.0中三个创建响应式数据的函数reactive、toRefs、ref reactive：把对象转换成一个响应式对象，也就是一个Proxy对象。 toRefs：它可以把一个代理对象中的所有属性也都转换成响应式的对象，toRefs()在处理这个对象的属性的时候，类似于ref。 ref： 把基本类型的数据转换成响应式对象。...
vue3新特性中的setup(),ref(),reactive()函数
荔枝吖阿
11-12 2963
setup()函数的用法，可以代替 Vue2 中的 date 和 methods 属性，直接把逻辑写在setup 里就可以 ref() 函数用法，是更新简单的变量 reactive()函数用法，更新复杂类型的变化(数组/对象) 注：return出去的数据和方法，在模板中才可以使用，这样可以精准的控制暴漏的变量和方法 案例 删除某个数据如图: template <ul v-for="(item,index) in studentList.list" :key="i...
vue3 setup reactive响应数据
weixin_50736511的博客
12-06 765
reactive不能修饰基本数据类型只能修饰对像和数组 改变对象（可以该变更深层次的对象） <template> 名字：{{name}} <br> 年龄：{{age}} <br> 性别：{{obj.sex}} <br> 身高：{{obj.long}} <br> 发行:{{obj.hair.color}}和{{obj.hair.type}} <br> <button @click="growup()"> 点击.
Vue3关于setup、ref、reactive属性
m0_67212141的博客
01-27 768
快来学习吧，原创不易，多多支持呀！每篇都是干货!
Vue3——响应式实现（ref、reactive）
mantou_riji的博客
07-24 4281
setup是Vue3中一个新的配置项，值为。eg：返回一个对象: App.vue eg2： 返回的是 在vue2中中的属性会通过原理最终包装成响应式数据_data。 vue3中为我们提供了两种包装响应式数据的方法：ref和reactive注意这里的ref和vue2中的ref不一样，这里是一个。上面使用setup包裹页面数据，但是这样编写出的数据不是响应式的，即数据改变页面不会被重新加载。从vue2中我们知道一个数据要实现响应式一定有对应的响应式得getter和setter方法，在vue3中通过帮我们生成响
Vue3的composition API—setup函数, ref函数，reactive函数
guoyaqi123456的博客
03-10 459
Vue3的setup函数，ref函数，reactive函数
Vue3 — setup、ref、 reactive基本使用
m0_48942526的博客
05-14 911
常用API 一、setup 类型： setup 函数是一个新的组件选项。它作为在组件内部使用组合式 API 的入口点 调用时间 在创建组件实例时，在初始 prop 解析之后立即调用 setup。在生命周期方面，它是在 beforeCreate 钩子之前调用的。 模板使用： 函数如果返回对象, 对象中的属性或方法, 模板中可以直接使用 <template> <h1>{{num}}</h1> </template> <script lang
Vue学习笔记12--Vue3之setup/ref函数/reactive函数/Vue3响应式原理/reactive对比ref
jxncxgx的专栏
01-25 678
setup/ref/reactive/vue3响应式原理
Vue3的setup函数以及ref和reactive方法的使用
TX9271000911的博客
07-14 2835
在vue3中，有个核心的东西，setup函数，它相当于一个新的生命周期，在beforeCreate 之前执行，在里面没有this setup默认是非响应式的，即做点击事件修改num的值，模板上的num不会跟着变。
Vue 3.0 响应式系统源码解析：effect、reactive、computed 等 API 实现原理
Vue3.0 响应式系统是基于依赖追踪和Proxy技术实现的，通过对响应式API的深入分析，我们可以了解到Vue3.0中的实现原理。 首先，响应式系统的核心是依赖追踪机制，这个机制允许Vue3.0追踪到组件中的依赖关系，从而...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值