A1066223647的博客

Vue3-15-其他文章目录Vue3-15-其他1.全局API的转移2.其他改变1.全局API的转移Vue 2.x 有许多全局 API 和配置。例如：注册全局组件、注册全局指令等。//注册全局组件Vue.component('MyButton', { data: () => ({ count: 0 }), template: '<button @click="count++">Clicked {{ count }} times.</button

Vue3-14-新的组件文章目录Vue3-14-新的组件1.Fragment2.Teleport3.Suspense1.Fragment在Vue2中: 组件必须有一个根标签在Vue3中: 组件可以没有根标签, 内部会将多个标签包含在一个Fragment虚拟元素中好处: 减少标签层级, 减小内存占用2.Teleport什么是Teleport？—— Teleport 是一种能够将我们的组件html结构移动到指定位置的技术。<teleport to="移动位置"> <d

Vue3-13-Composition API 的优势文章目录Vue3-13-Composition API 的优势1.Options API 存在的问题2.Composition API 的优势1.Options API 存在的问题使用传统OptionsAPI中，新增或者修改一个需求，就需要分别在data，methods，computed里修改 。 2.Composition API 的优势我们可以更加优雅的组织我们的代码，函数。让相关功能的代码更加有序的组织在一起。

Vue3-12-其它 Composition API文章目录Vue3-12-其它 Composition API1.shallowReactive 与 shallowRef2.readonly 与 shallowReadonly3.toRaw 与 markRaw4.customRef5.provide 与 inject6.响应式数据的判断1.shallowReactive 与 shallowRefshallowReactive：只处理对象最外层属性的响应式（浅响应式）。shallowRef：只处理

Vue3-11-toRef与toRefs文章目录Vue3-11-toRef与toRefs作用：创建一个 ref 对象，其value值指向另一个对象中的某个属性。语法：const name = toRef(person,'name')应用: 要将响应式对象中的某个属性单独提供给外部使用时。扩展：toRefs与toRef功能一致，但可以批量创建多个 ref 对象，语法：toRefs(person)<template> <h4>{{person}}&l

Vue3-10-自定义hook文章目录Vue3-10-自定义hook什么是hook？—— 本质是一个函数，把setup函数中使用的Composition API进行了封装。类似于vue2.x中的mixin。自定义hook的优势: 复用代码, 让setup中的逻辑更清楚易懂。<template> <h2>当前求和为：{{sum}}</h2> <button @click="sum++">点我+1</button> &l

Vue3-09-生命周期文章目录Vue3-09-生命周期vue2.x的生命周期vue3.0的生命周期Vue3.0中可以继续使用Vue2.x中的生命周期钩子，但有有两个被更名：beforeDestroy改名为 beforeUnmountdestroyed改名为 unmountedVue3.0也提供了 Composition API 形式的生命周期钩子，与Vue2.x中钩子对应关系如下：beforeCreate===>setup()created=======>setup(

Vue3-08-计算属性与监视文章目录Vue3-08-计算属性与监视1.computed函数2.watch函数3.watchEffect函数1.computed函数与Vue2.x中computed配置功能一致写法import {computed} from 'vue'setup(){ ... //计算属性——简写 let fullName = computed(()=>{ return person.firstName + '-' + perso

Vue3-07-setup的两个注意点文章目录Vue3-07-setup的两个注意点setup执行的时机在beforeCreate之前执行一次，this是undefined。setup的参数props：值为对象，包含：组件外部传递过来，且组件内部声明接收了的属性。context：上下文对象attrs: 值为对象，包含：组件外部传递过来，但没有在props配置中声明的属性, 相当于 this.$attrs。slots: 收到的插槽内容, 相当于 this.$slots。emi

Vue3-06-reactive对比ref文章目录Vue3-06-reactive对比ref从定义数据角度对比：ref用来定义：基本类型数据。reactive用来定义：对象（或数组）类型数据。备注：ref也可以用来定义对象（或数组）类型数据, 它内部会自动通过reactive转为代理对象。从原理角度对比：ref通过Object.defineProperty()的get与set来实现响应式（数据劫持）。reactive通过使用Proxy来实现响应式（数据劫持）, 并通过Reflect

Vue3-05-Vue3.0中的响应式原理文章目录Vue3-05-Vue3.0中的响应式原理vue2.x的响应式Vue3.0的响应式vue2.x的响应式实现原理：对象类型：通过Object.defineProperty()对属性的读取、修改进行拦截（数据劫持）。数组类型：通过重写更新数组的一系列方法来实现拦截。（对数组的变更方法进行了包裹）。Object.defineProperty(data, 'count', { get () {}, set () {}})

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

Vue3-03-ref函数文章目录Vue3-03-ref函数作用: 定义一个响应式的数据语法: const xxx = ref(initValue)创建一个包含响应式数据的引用对象（reference对象，简称ref对象）。JS中操作数据： xxx.value模板中读取数据: 不需要.value，直接：<div>{{xxx}}</div>备注：接收的数据可以是：基本类型、也可以是对象类型。基本类型的数据：响应式依然是靠Object.defineProper

Vue3-02-初始setup文章目录Vue3-02-初始setup理解：Vue3.0中一个新的配置项，值为一个函数。setup是所有Composition API（组合API）“ 表演的舞台 ”。组件中所用到的：数据、方法等等，均要配置在setup中。setup函数的两种返回值：若返回一个对象，则对象中的属性、方法, 在模板中均可以直接使用。（重点关注！）若返回一个渲染函数：则可以自定义渲染内容。（了解）注意点：尽量不要与Vue2.x配置混用Vue2.x配置（data、me

Vue3-01-分析工程结构文章目录Vue3-01-分析工程结构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')App.vue的分析<