随笔分类 - Vue3
摘要：逻辑分层 我们在使用vue3开发项目的时候， 如何进行【区域分层】呢？？？？ 举一个简单的小粒子 一个区域有【查询逻辑、修改后的保存逻辑、新增逻辑、删除逻辑】 这个页面可能还有其他的区域。A区域、B区域,C区域...【有很多逻辑】 这个时候我们可以将一个区域的逻辑分离出去 将各个区域业务分开 exp
阅读全文
摘要：props参数的使用 在使用vue的项目开发的过程中 经常会定义大量的组件使用 这个时候组件中的定义的数据类型就非常重要了 此时我们需要定义组件中需要的数据类型 之前我只知道简单的几个 今天忽然发现原来还可以这样使用简直太棒了 特别是自定义验证这一块可能不经常用 但是可以处理很多特殊的场景 prop
阅读全文
摘要：场景 在项目开发的时候，前端肯定是先写静态页面 在静态页面写好之后 然后就可以与后端对接数据了【高兴】 但是在对接接口的时候 我们会发现后端返回来的字段与前端在页面上写的可能不一致 这个时候有意思的事情就发生了 这种情况数据是不会跟新的 <div> {{ objData }} <button @cl
阅读全文
摘要：1.类型判断的四种方法 isRef: 检查一个值是否为一个ref对象 isReactive:检查一个对象是否是由 reactive 创建的响应式代理 isReadonly: 检查一个对象是否是由 readonly 创建的只读代理 isProxy: 检查个对象是否是由 reactive 或者 read
阅读全文
摘要：1.readonly 深度只读 被readonly包裹的数据只能够读取。 是一个深度只读，不能够修改。 我们看一下面的代码。 我们想修改值,但是修改后视图无响应。 并且控制台警告目标为只读 readonly深度只读的应用场景： 比如我们登录后用户信息不会发生改变了。 <template> <div>
阅读全文
摘要：1.Vue3 中 ref 和 reactive 都是深度监听 默认情况下， 无论是通过 ref 还是 reactive 都是深度监听。 深度监听存在的问题： 如果数据量比较大，非常消耗性能。 有些时候我们并不需要对数据进行深度监听。 这个时候就没有必要使用ref和reactive 2.说明 ref
阅读全文
摘要：1.provide 和 inject 的讲解 provide和inject可以实现嵌套组件之间进行传递数据。 这两个函数都是在setup函数中使用的。 父级组件使用provide向下进行传递数据； 子级组件使用inject来获取上级组件传递过来的数据； 需要注意的是： 1==>provide只能够向
阅读全文
摘要：1.setUp函数的第1个参数props setup(props,context){} 第一个参数props: props是一个对象，包含父组件传递给子组件的所有数据。 在子组件中使用props进行接收。 包含配置声明并传入的所有的属性的对象 也就是说:如果你想通过props的方式输出父组件传递给子
阅读全文
摘要：1. ref是复制,视图会更新 如果利用ref将某一个对象中的某一个属性值变成响应式数据 我们修改响应式数据是不会影响原始数据的; 同时视图会跟新。 ref就是复制 复制是不会影响原始数据的 <template> <div> <div> <div>{{stateObj}}</div> <button
阅读全文
摘要：创建文件夹 在src下创建文件夹。文件名称为hooks。 hooks下的文件夹下，是你的封装的hook； 通过命名为useXXXXXX usexy.js 文件是封装的获取屏幕的坐标 import { onBeforeUnmount, onMounted, ref } from "vue"; expo
阅读全文
摘要：VUe2.0 和 Vue3.0 的生命周期作对比 beforeCreate -> 请使用 setup() created -> 请使用 setup() beforeMount -> onBeforeMount mounted -> onMounted beforeUpdate -> onBefore
阅读全文
摘要：1 使用reactive 实现数据的响应式 <template> <div> <h2>toRef的使用</h2> <p> 姓名：{{state.name }} </p> <p>年龄:{{ state.age }} </p> <button @click="changeHander">改变内容</bu
阅读全文
摘要：1使用计算属性 computed 实现按钮是否禁用 我们在有些业务场景的时候，需要将按钮禁用。 这个时候，我们需要使用(disabled)属性来实现。 disabled的值是true表示禁用。false表示可以使用。 由于disabled的值是动态变化的。 此时我们就可以使用计算属性computed
阅读全文
摘要：1.什么是ref? 1.ref和reactive-样 也是用来实现响应式数据的方法 由于reactive必须传递一个对象， 所以导致在企业开发中如果我们只想让某个变量实现响应式的时候会非常麻烦 所以Vue3就给我们提供了ref方法，实现对简单值的监听 2.ref本质: ref底层的本质其实还是rea
阅读全文
摘要：1 setUp的执行时机 我们都知道，现在vue3是可以正常去使用methods的。 但是我们却不可以在setUp中去调用methods中的方法。 为什么了？？？ 我们先了解一下下面这两个生命周期函数，分别是： beforeCreate 表示data 中的数据还没有初始化，是不可以使用的 Creat
阅读全文
摘要：1.初识setUp的使用 简单介绍下面的代码功能： 使用ref函数，去使用监听某一个变量的变化，并且把它渲染到视图上。 setUp函数是组合API的入口函数。这个是非常重要的。 setUp可以去监听变量的变化哈！我们将会利用它 ref 在vue中内置，需要导入。 <template> <div>{{
阅读全文
