企业 网站备案,wordpress文字黑提,哪些网站可以做翻译兼职,wordpress 小米社区5 组件高级#xff08;上#xff09; 摘要 在本文中#xff0c;我们会详细讨论watch侦听器的基本使用#xff0c;并且了解vue中常用的生命周期函数、实现组件之间的数据共享#xff0c;最后学习如何在vue3.x项目中全局配置axios。 声明#xff1a;为了文章的清爽性上 摘要 在本文中我们会详细讨论watch侦听器的基本使用并且了解vue中常用的生命周期函数、实现组件之间的数据共享最后学习如何在vue3.x项目中全局配置axios。 声明为了文章的清爽性在文章内部的代码演示中只会附上部分演示代码main.js文件的代码通常不贴出如果感兴趣可以前往代码仓库获取 作者来自ArimaMisaki创作 文章目录5 组件高级上5.1 watch侦听器5.1.1 watch侦听器概述5.1.2 watch的使用场景5.1.3 侦听器选项5.1.4 监听对象单个属性的变化5.1.5 计算属性和侦听器5.2 生命周期5.2.1 组件运行的过程5.2.2 如何监听组件的不同时刻5.2.3 如何监听组件的更新5.2.4 组件生命周期函数5.3 数据共享5.3.1 组件之间的关系5.3.2 父子组件5.3.3 兄弟组件5.3.4 Prop逐级透传问题5.3.5 后代组件5.3.6 基于Provide向下共享响应式的数据5.3.7 vuex5.4 全局配置axios5.1 watch侦听器
5.1.1 watch侦听器概述
说明watch侦听器允许开发者监视数据的变化从而针对数据的变化做特定的操作。例如监视用户名的变化并发起请求判断用户名是否可用。
本质监听器的本质也是一个函数它允许接收两个参数即新数据和老数据。
使用在选项式API中我们可以使用watch选项来定义所需的侦听器。 5.1.2 watch的使用场景
场景检测用户名是否可用
说明监听username值的变化并使用axios发起Ajax请求检测当前输入的用户名是否可用。要完成这个场景需先安装axios包。
templatedivh3watch 侦听器的用法/h3input typetext classform-control v-model.trimusername/div
/templatescript
import axios from axiosexport default {name: MyWatch,data() {return {username: admin,}},watch: {async username(newVal, oldVal) {console.log(newVal, oldVal);const { data: res } axios.get(https://www.escook.cn/api/finduser newVal)console.log(res);}}
}
/scripttemplatedivh1App根组件/h1hrmy-watch/my-watch/div
/templatescript
import MyWatch from ./MyWatch.vue
export default {name: MyWatch,components: {MyWatch},
}
/script5.1.3 侦听器选项
immediate选项watch是懒执行的。默认情况下组件在初次加载完毕后不会调用watch侦听器仅当数据源发生改变时侦听器才会触发。如果想让watch侦听器立即被调用需要使用immediate选项。需要额外注意的是当我们第一次使用侦听器时旧值为undefined。
deep选项如果我们侦听的源是对象或数组在不使用选项的情况下我们无法使用侦听器来侦听它们的变化。使用deep选项可以强制深度遍历源以便源在进行变更的时候触发回调。
info: {async handler(newVal) {const { data: res } await axios.get(https://www.escook.cn/api/finduser newVal.username)console.log(res);},deep:true}5.1.4 监听对象单个属性的变化
说明使用deep选项会遍历数组或对象中的所有属性如果想要监听单个属性我们可以采用.的形式指定获取数组或对象的单个属性作为监听源。不过需要注意的是由于使用了.的缘故作为键的一方需要加上单引号或双引号。 5.1.5 计算属性和侦听器
说明有很多人会搞混计算属性和侦听器。实际上计算属性侧重于监听多个值得变化并最终计算返回一个新值而侦听器侧重于监听单个数据源的变化最终执行特定的业务处理不需要有任何返回值。 5.2 生命周期
5.2.1 组件运行的过程
组件的生命周期组件的生命周期指的是组件从创建到湮灭的整个过程该术语强调的是这个时间段。 5.2.2 如何监听组件的不同时刻
说明Vue框架为组件内置了不同时刻的生命周期函数生命周期函数会伴随着组件的运行而自动调用。另外生命周期函数常被称为生命周期钩子。
当组件在内存中被创建完毕之后会自动调用created函数当组件被成功的渲染到页面上之后会自动调用mounted函数当组件被销毁完毕之后会自动调用unmounted函数。
templatedivh3LifeCycle 组件/h3/div
/templatescript
export default {name:LifeCycle,// 组件在内存中被创建完毕了created(){console.log(created:组件在内存中被创建完毕了);},// 组件第一次被渲染到页面上mounted(){console.log(mounted:组件第一次被渲染到了页面上);},// 组件被销毁完毕了unmounted(){console.log(unmounted:组件被销毁完毕了);}
}
/scripttemplatedivh1App根组件/h1hrbutton clickflag !flagtoggle/buttonlife-cycle v-ifflag/life-cycle/div
/templatescript
import LifeCycle from ./life-cycle.vue
export default {name: MyApp,data(){return{flag:true}},components: {LifeCycle}
}
/script5.2.3 如何监听组件的更新
说明一旦组件中的data数据源发生变化vue会自动重新渲染组件的DOM结构从而保证View视图展示的数据和Model数据源保持一致。当组件被重新渲染完毕后会自动调用updated生命周期函数。 5.2.4 组件生命周期函数
说明在之前学习的四个周期函数之前加上before即可出现另外四个生命周期函数。 5.3 数据共享
5.3.1 组件之间的关系
说明在项目开发中组件之间的关系分为如下三种
父子关系兄弟关系后代关系 5.3.2 父子组件
父组件向子组件共享数据父组件使用v-bind指令来向子组件共享数据子组件需要使用props选项来接收数据。
子组件向父组件共享数据子组件可以通过自定义事件的方式向父组件共享数据。
父子组件之间数据双向同步通过v-model指令来维护组件内外数据的双向同步。 5.3.3 兄弟组件
说明兄弟组件之间实现数据共享的方案是EventBus。可以借助于第三方的包mitt来创建eventBus对象从而实现兄弟组件之间的数据共享。
示意图 安装mitt依赖包npm install mitt
使用步骤
新建一个EventBus.js文件在里面创建mitt实例并默认导出在数据接收方的created生命周期钩子中调用mitt实例对象.on(事件名称,要接收的数据)自定义一个事件通过事件处理函数的形参来接收数据。在数据发送方调用bus.emit(事件名称,要发送的数据)方法触发自定义事件。 5.3.4 Prop逐级透传问题
说明通常情况下当我们需要从父组件向子组件传递数据时会使用 props。想象一下这样的结构有一些多层级嵌套的组件形成了一颗巨大的组件树而某个深层的子组件需要一个较远的祖先组件中的部分数据。在这种情况下如果仅使用 props 则必须将其沿着组件链逐级传递下去这会非常麻烦 如上图在传递的过程中可能Footer组件根本不关心这些props但为了DeepChild的使用它必须接收并且继续往下传递如果组件的链路非常长可能会影响到这条路上更多的组件这一问题被称为prop逐级透传我们希望避免这种情况。 5.3.5 后代组件
说明如果仅仅只是父子关系那么使用props和v-bind或许是一种不错的策略但如果要接收数据的组件离发送数据的组件很远(链路很长)使用props就会导致逐级透传问题这时候我们可以使用provide和inject来解决这一问题。
provide选项provide是一个函数和data一样返回一个共享的数据对象。对于provide对象上的每一个属性后代组件都会用其key为注入名查找期望注入的值属性的值就是要提供的数据。
inject选项inject是一个数组用于接收provide提供的共享数据根据provide返回的对象中属性的键进行查找。 5.3.6 基于Provide向下共享响应式的数据 5.3.7 vuex
说明vuex是终极的组件之间的共享方案。在企业级的vue项目开发中vuex可以让组件之间的数据共享变得高效、清晰、且易于维护。 5.4 全局配置axios
引入在实际项目中几乎每个组件都会使用axios发起数据请求此时会遇到两个问题
每个组件中都需要导入axios每次发请求都需要填写完整的请求路径
说明想要全局配置axios可以在main.js入口文件中通过app.config.globalProperties全局挂载axios。
格式app.config.globalProperties.$http
