2021年12月21日
vue3中teleport使用
摘要： <template> <!-- vue3中模版结构可以没有根标签 --> <div class="father"> <div class="child"> <teleport to='body'> <input type="text" v-model="keyword"> <h3>{{keyword 阅读全文
posted @ 2021-12-21 16:52 _只码农 阅读(273) 评论(0) 推荐(0)
vue3响应式数据判断
摘要： 1.isRef：检查一个值是否为ref对象 2.isReactive：检查一个对象是否为reactive对象 3.isReadonly：检查一个对象是否为readOnly创建的只读代理 4.isProxy：检查一个对象是否由reactive和readonly创建的代理 阅读全文
posted @ 2021-12-21 16:24 _只码农 阅读(112) 评论(0) 推荐(0)
vue3 provide和inject
摘要： 作用：实现祖孙组件之间的通信 实现：父组件中有一个provide选项来提供数据，后代组件中有一个inject选项来使用这些数据 1.祖组件中 import { provide} from 'vue' export default { name: 'App', setup(){ let testDat 阅读全文
posted @ 2021-12-21 16:21 _只码农 阅读(58) 评论(0) 推荐(0)
vue3 customRef
摘要： 作用：创建一个自定义的 ref，并对其依赖项跟踪和更新触发进行显式控制。 //自定义ref--myRef function myRef(value){ let timer return customRef((track,trigger)=>{ return { //return必写，官方要求必须返回 阅读全文
posted @ 2021-12-21 16:02 _只码农 阅读(109) 评论(0) 推荐(0)
vue3 readOnly、shallowReadOnly、toRaw和markRaw
摘要： readOnly：让一个响应式数据变成只读的（深只读） shallowReadOnly：让一个响应式数据变成只读的（浅只读） 应用场景：不希望数据被修改时 语法： let person = reactive({ name:'章三', age:18, job:{ j1:{ salary:20 } } 阅读全文
posted @ 2021-12-21 14:38 _只码农 阅读(250) 评论(0) 推荐(0)
2021年12月14日
vue3中toRef和toRefs，shallowRef和shallowReactive
摘要： toRef：创建一个ref对象，其value值指向对象的某个属性 语法： const name = toRef(person,'name') toRefs：作用同toRef，可以同时创建多个ref对象 应用：要将响应式对象中的某个属性单独给外部使用时 使用： 1.在页面中引入 import {rea 阅读全文
posted @ 2021-12-14 17:02 _只码农 阅读(211) 评论(0) 推荐(0)
2021年12月13日
vue3里watch和watchEffect的使用
摘要： 1.在页面中引用watch import {reactive,watch, ref} from 'vue' 2.在setup函数中使用watch监听ref定义的数据 //监听ref所定义的一个数据 newValue改变后新数据，变化前的旧数据 watch(sum,(newValue,oldValue 阅读全文
posted @ 2021-12-13 16:14 _只码农 阅读(553) 评论(0) 推荐(0)
2021年12月7日
vue3中使用computed计算属性
摘要： 1.引用computed 2.在setup中使用 上面是computed的简写，没有考虑计算属性修改的情况，只能读。 下面是computed的完整写法（读和写） 页面中使用： 阅读全文
posted @ 2021-12-07 16:23 _只码农 阅读(647) 评论(0) 推荐(0)
2021年11月25日
axios的封装和使用
摘要： import config from '../api/config' import axios from 'axios' import {getLocal} from '../utils/local' class HttpRequest { //初始化构造函数，this指向的是HttpRequest 阅读全文
posted @ 2021-11-25 16:06 _只码农 阅读(549) 评论(0) 推荐(0)
2021年11月16日
el-selsect实现三级联动
摘要： html： 数据结构如下： 可以使用el-select自带函数chang，获取返回的value值，使用find函数去查找与value值对应的数据 handleSelectChange1(e) { this.areaForm.selectSecondColumnObj = this.areaArr.f 阅读全文
posted @ 2021-11-16 11:06 _只码农 阅读(274) 评论(0) 推荐(0)