vue3中使用ref来创建响应式数据,让习惯了选项式API的我很不习惯.因为得使用xxx.value来读写响应式数据,没有vue2中直接使用this.xxx来读写简洁. vue3这样设计的原因是原生JavaScript无法拦截对局部变量的读写,只能拦截对对象属性的读写. // 局部变量a的读写,没法拦截 let a = 1 console.log(a) // 对象属性b.value的读写,可以通过get/set或proxy拦截 let b = new Proxy({ get() { // ...…

1.什么是ref? 1.ref和reactive-样 也是用来实现响应式数据的方法 由于reactive必须传递一个对象, 所以导致在企业开发中如果我们只想让某个变量实现响应式的时候会非常麻烦 所以Vue3就给我们提供了ref方法,实现对简单值的监听 2.ref本质: ref底层的本质其实还是reactive 系统会自动根据我们给ref传入的值将它转换成 ref(xx) -> reactive({value:xx}) 3.ref注意点: 在Vue的html中使用ref的值不用通过value获取…

一.setup文件的认识 特点1:script 中间的内容就是一个对象 特点2:script 在第一层 定义的方法 或者 变量 => 就是这个对象 属性  => 顶层的绑定回被暴露给模板(模板可以直接使用这个变量) 特点3:setup 默认执行生命周期beforeCreate created 注意:这个对象 => 就是当前这个组件实例 二.什么是响应式api 处理 数据 => 我们把页面写的数据,需要动态改变的数据 => 叫做  响应式数据 => 数据改变视图中使用了这…

Vue3中的响应式对象Reactive源码分析 ReactiveEffect.js 中的 trackEffects函数 及 ReactiveEffect类 在Ref随笔中已经介绍,在本文中不做赘述 本文中所有的源代码均为 JS简易版本,便于阅读理解 Vue3源码分析之 Ref 与 ReactiveEffect Reactive流程图 reactive(obj) 都做了些什么? reactive函数其实只做了 过滤只读对象 的功能,创建 Proxy 代理是通过调用 createReactiveOb…

在vue2中一般放在created中,但是在vue3中取消了created生命周期,请求方式有两种 直接在setup中去获取数据 setup(props) { const data = reactive({ note: [], }); getArticalLatest().then((res) => { data.note = res.data.data; }); return { ...toRefs(data), }; }, 在onMouted里面请求数据 setup(props) { con…

watch 监听普通类型 let count = ref(1); const changeCount = () => { count.value+=1 }; watch(count, (newValue, oldValue) => { //直接监听 console.log("count改变了"); }); 监听响应式对象 let book = reactive({ name: "js编程", price: 50, }); const changeBook…

1使用计算属性 computed 实现按钮是否禁用 我们在有些业务场景的时候,需要将按钮禁用. 这个时候,我们需要使用(disabled)属性来实现. disabled的值是true表示禁用.false表示可以使用. 由于disabled的值是动态变化的. 此时我们就可以使用计算属性computed 这个方法. 只要值发生变化 他就会重新去计算. 在vue3中,如果需要使用computed需要引入. <template> <div> <div> <div>…

vue3 中 的 computed 的使用,由于 vue3 兼容 vue2 的选项式API,所以可以直接使用 vue2的写法,这篇文章主要介绍 vue3 中 computed 的新用法,对比 vue2 中的写法,让您快速掌握 vue3 中 computed 的新用法. 组合式 API 中使用 computed 时,需要先引入:import { computed } from "vue".引入之后 computed 可以传入的参数有两种:回调函数和 options .具体看看它是如何使用…

Vue中的插槽相信使用过Vue的小伙伴或多或少的都用过,但是你是否了解它全部用法呢?本篇文章就为大家带来Vue3中插槽的全部用法来帮助大家查漏补缺. 什么是插槽 简单来说就是子组件中的提供给父组件使用的一个坑位,用<slot></slot> 表示,父组件可以在这个坑位中填充任何模板代码然后子组件中<slot></slot>就会被替换成这些内容.比如一个最简单插槽例子 //父组件 <template> <div> <Child&g…

前言: 备注:本文基于对webpack Module Federation有一定了解的情况下 一般情况下使用模块联邦都是会使用相同的版本,如Vue2的组件时在Vue2中使用,但我为什么会在Vue3项目中去使用Vue2的组件呢,其实是因为历史原因.好几个老的核心的项目都是使用Vue2来写的,在中期以及空闲的时候团队是有机会使用Vue3去重构,但是并没有这样做,到了现在这个阶段已经太晚了,项目变得庞大,人员也减少了. 最近在维护一个项目,被折磨得不行,比如一个.vue文件有3千行代码,框架设计不合理…