06 2021 档案
摘要: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>{{
阅读全文