![](https://img-blog.csdnimg.cn/20190918140145169.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Vue 3.0
文章平均质量分 55
day day up
凉生阿新
旧人不知我近况,新人不知我过往,
近况不该旧人知,过往不与新人讲,
纵你阅人何其多,再无一人恰似我!
展开
-
【Vue.js 3.0】递归组件实现思路
创建的一个组件,这个组件在其模板内部会递归地调用自己,从而实现无限嵌套或树形结构的渲染。原创 2024-03-27 22:33:39 · 395 阅读 · 0 评论 -
【Vue.js 3.0】 emit(“update:modelValue“) 双向绑定
在Vue 3中,emit('update:modelValue')的作用是触发一个名为update:modelValue的自定义事件。这个事件通常用于实现父子组件之间的双向数据绑定原创 2023-07-05 23:15:29 · 6158 阅读 · 3 评论 -
【Vue.js】项目中 router-view 可以有几个?
在 Vue 项目中,router-view是一个用于渲染路由组件的组件。在一个应用程序中,可以多次使用router-view,以渲染多个不同的路由组件。原创 2023-06-26 18:28:59 · 2566 阅读 · 0 评论 -
【Vue.js 3.0】Day-17 Composition API 依赖注入provide & inject
provide 可以在祖先组件中指定我们想要提供给后代组件的数据或方法,而在任何后代组件中,我们都可以使用 inject 来接收 provide 提供的数据或方法。想象一下这样的结构:有一些深度嵌套的组件,而深层的子组件只需要父组件的部分内容。在这种情况下,如果仍然将 props 沿着组件链逐级传递下去,可能会很麻烦。使用场景:当父组件有很多数据需要分发给其子代组件的时候, 就可以使用provide和inject。当我们需要从父组件向子组件传递数据时,我们使用 props可以实现!原创 2023-01-03 17:17:59 · 531 阅读 · 2 评论 -
【Vue.js 3.0】Day-19 Vue.js 3.0 对比 Vue.js 2.0 的其它改变
全局API的转移、Vue3.0对比Vue2.0的其它改变!原创 2023-01-02 12:50:34 · 298 阅读 · 0 评论 -
【Vue.js 3.0】Day-18 Vue3 新的组件
Fragment 片段组件、Teleport 瞬间移动组件、Suspense 异步组件。原创 2022-12-31 12:00:59 · 226 阅读 · 0 评论 -
【Vue.js 3.0】Day-16 Composition API 的优势
Composition API就解决了Options API 存在的问题!功能比较发杂的组件,vue3中还可以自定义 hooks, 将单个功能封装成单个的函数,在集成到组件中去复用! 将功能进行解耦,方便维护、复用、可读性强!想让Composition API 发挥出自己的威力! 需得借助hook函数!hook就是把所有得方法、函数、计算属性、监听属性、数据、生命周期按照功能点进行打包, 打出来的包就是一个 hook函数!我们可以更加优雅的组织我们的代码,函数。让相关功能的代码更加有序的组织原创 2022-12-30 22:27:25 · 166 阅读 · 0 评论 -
【Vue.js 3.0】Day-15 Composition API 响应式数据的判断
isRef: 检查一个值是否为一个 ref 对象。isReactive: 检查一个对象是否是由 reactive 创建的响应式代理。isReadonly: 检查一个对象是否是由 readonly 创建的只读代理。isProxy: 检查一个对象是否是由 reactive 或者 readonly 方法创建的代理。原创 2022-12-30 20:57:17 · 100 阅读 · 0 评论 -
【Vue.js 3.0】Day-14 Composition API customRef()
customRef 作用是创建一个自定义的 ref,并对其依赖项跟踪和更新触发进行显式控制。原创 2022-12-30 17:18:55 · 65 阅读 · 0 评论 -
【Vue.js 3.0】Day-13 Composition API toRaw & markRaw
toRaw 将一个由reactive生成的转为。使用场景:用于读取响应式对象对应的普通对象,对这个普通对象的所有操作,不会引起页面更新。提高页面性能。markRaw 标记一个对象,使其永远不会再成为响应式对象。应用场景:有些值不应被设置为响应式的,例如复杂的第三方类库等。当渲染具有不可变数据源的大列表时,跳过响应式转换可以提高性能。原创 2022-12-30 12:53:25 · 90 阅读 · 0 评论 -
【Vue.js 3.0】Day-12 Composition API readonly & shallowReadonly
readonly 让一个响应式数据变为只读的(深只读), shallowReadonly 让一个响应式数据变为只读的(浅只读)。原创 2022-12-29 21:47:57 · 72 阅读 · 0 评论 -
【Vue.js 3.0】Day-11 Composition API shallowReactive & shallowRef
shallowReactive:只处理对象最外层属性的响应式(浅响应式)。shallowRef:只处理基本数据类型的响应式, 不进行对象的响应式处理原创 2022-12-29 17:52:39 · 385 阅读 · 0 评论 -
【Vue.js 3.0】Day-10 Composition API toRef & toRefs
作用:创建一个 ref 对象,其value值指向另一个对象中的某个属性。语法:const name = toRef(person,'name')应用: 要将响应式对象中的某个属性单独提供给外部使用时、还不想丢失响应式。扩展:toRefs 与toRef功能一致,但可以批量创建多个 ref 对象,语法:toRefs(person)。原创 2022-12-29 15:16:35 · 111 阅读 · 0 评论 -
【Vue.js 3.0】Day-09 Composition API 自定义 hook 函数
Hook 本质是一个函数,把setup函数中使用的Composition API(ref、reactive、计算属性、监听属性、方法、生命周期钩子、计算属性、)进行了封装。原创 2022-12-28 19:26:57 · 117 阅读 · 0 评论 -
【Vue.js 3.0】Day-08 Vue3 & Vue2 生命周期
Vue3.0中可以继续使用Vue2.x中的生命周期钩子,但有有两个被更名:beforeDestroy改名为 beforeUnmount、destroyed改名为 unmounted。原创 2022-12-28 16:54:43 · 207 阅读 · 0 评论 -
【Vue.js 3.0】Day-07 Composition API watch监听器 和 watchEffect高级监听器
watch是惰性执行,也就是只有监听的值发生变化的时候才会执行,但是watchEffect不同,每次代码加载watchEffect都会执行(忽略watch第三个参数的配置,如果修改配置项也可以实现立即执行)watch需要传递监听的对象,watchEffect不需要watch只能监听响应式数据:ref定义的属性和reactive定义的对象,如果直接监听reactive定义对象中的属性是不允许的(会报警告),除非使用函数转换一下。其实就是官网上说的监听一个getterwatchEffect如果监听reac原创 2022-12-28 11:37:58 · 466 阅读 · 0 评论 -
【Vue.js 3.0】Day-06 Composition API computed计算属性
computed又被称作计算属性,用于动态的根据某个值或某些值的变化,来产生对应的变化,computed具有缓存性,当依赖的值无变化时,不会引起computed声明值的变化。与Vue2.x中computed配置功能一致;原创 2022-12-27 16:34:22 · 114 阅读 · 0 评论 -
【Vue.js 3.0】Day-05 Vue3、Vue2 响应式原理
1、defineProperty是对一个空对象进行设置属性,在读取和改变属性值的拦截一下,可以实现一些其他的逻辑处理。不支持函数拦截;2、Proxy是对一个完整的对象进行代理,相当于拷贝了一份,当我们对原数据进行属性值操作时,这个代理对象会挡在前面对数据进行操作。支持对象代理,数组代理和函数代理。原创 2022-12-26 22:34:53 · 236 阅读 · 0 评论 -
【Vue.js 3.0】Day-04 Composition API ref & reactive 函数
ref通过Object.defineProperty()的get与set来实现响应式(数据劫持)。reactive通过使用Es6 新增的构造函数Proxy来实现响应式(数据劫持), 并通过Reflect操作源对象内部的数据。原创 2022-12-26 12:32:34 · 491 阅读 · 0 评论 -
【Vue.js 3.0】Day-02 Vue.js 分析工程结构目录
Vue3.0 项目分析工程结构!原创 2022-12-25 19:13:19 · 428 阅读 · 0 评论 -
【Vue.js 3.0】Day-03 常用 Composition API 拉开序幕的 setup()
Vue3.0中一个新的配置项,值为一个函数。setup是所有Composition API (组合API) "表演的舞台"。组件中所用到的:数据、方法等等,均要配置在setup中。setup 函数的两种返回值:若返回一个对象,则对象中的属性、方法在模板中均可以直接使用。(重点关注!若返回一个渲染函数: 则可以自定义渲染内容。(了解)setup 函数注意点?Vue2.0 配置(data、methods、computed...) 中可以访问到 setup 中的属性、方法。原创 2022-12-14 21:13:04 · 245 阅读 · 0 评论 -
【Vue.js 3.0】Day-01 创建 Vue3.0 工程
vite 下一代前端开发构建工具!原创 2022-12-13 20:06:51 · 396 阅读 · 0 评论 -
【Vue.js】 Vue axios 二次封装
axios 的 API 很友好,你完全可以很轻松地在项目中直接使用。不过随着项目规模增大,如果每发起一次HTTP请求,就要把这些比如设置超时时间、设置请求头、根据项目环境判断使用哪个请求地址、错误处理等等操作,都需要写一遍。这种重复劳动不仅浪费时间,而且让代码变得冗余不堪,难以维护。为了提高我们的代码质量,我们应该在项目中二次封装一下 axios 再使用。原创 2022-10-26 21:20:13 · 291 阅读 · 0 评论 -
Vue3 基础介绍
将同一逻辑关注点相关的代码收集到一起,这就是组合式API(composition-api);实现组合式API的入口点就是setup函数;setup()原创 2022-09-20 19:50:16 · 2170 阅读 · 0 评论