hookEvent,原来可以这样监听组件生命周期

1. 内部监听生命周期函数

<template>
<div class="echarts"></div>
</template>
<script>
export default {
mounted() {
this.chart = echarts.init(this.$el)
// 请求数据,赋值数据 等等一系列操作...
// 监听窗口发生变化,resize组件
window.addEventListener('resize', this.$_handleResizeChart)
},
updated() {
// 干了一堆活
},
created() {
// 干了一堆活
},
beforeDestroy() {
// 组件销毁时,销毁监听事件
window.removeEventListener('resize', this.$_handleResizeChart)
},
methods: {
$_handleResizeChart() {
this.chart.resize()
},
// 其他一堆方法
}
}
</script>

这样写不是很好,应该将监听resize事件与销毁resize事件放到一起,现在两段代码分开而且相隔几百行代码,可读性比较差

export default {
mounted() {
this.chart = echarts.init(this.$el)
// 请求数据,赋值数据 等等一系列操作... // 监听窗口发生变化,resize组件
window.addEventListener('resize', this.$_handleResizeChart)
// 通过hook监听组件销毁钩子函数,并取消监听事件
this.$once('hook:beforeDestroy', () => {
window.removeEventListener('resize', this.$_handleResizeChart)
})
},
updated() {},
created() {},
methods: {
$_handleResizeChart() {
// this.chart.resize()
}
}
}

Vue组件中,可以用过$on,$once去监听所有的生命周期钩子函数,如监听组件的updated钩子函数可以写成 this.$on('hook:updated', () => {})

2. 外部监听生命周期函数

<template>
<!--通过@hook:updated监听组件的updated生命钩子函数-->
<!--组件的所有生命周期钩子都可以通过@hook:钩子函数名 来监听触发-->
<custom-select @hook:updated="$_handleSelectUpdated" />
</template>
<script>
import CustomSelect from '../components/custom-select'
export default {
components: {
CustomSelect
},
methods: {
$_handleSelectUpdated() {
console.log('custom-select组件的updated钩子函数被触发')
}
}
}
</script>

小项目还用Vuex?用Vue.observable手写一个状态管理吧

在前端项目中,有许多数据需要在各个组件之间进行传递共享,这时候就需要有一个状态管理工具,一般情况下,我们都会使用Vuex,但对于小型项目来说,就像Vuex官网所说:“如果您不打算开发大型单页应用,使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单,您最好不要使用 Vuex”。这时候我们就可以使用Vue2.6提供的新API Vue.observable手动打造一个Vuex

创建 store

import Vue from 'vue'

// 通过Vue.observable创建一个可响应的对象
export const store = Vue.observable({
userInfo: {},
roleIds: []
}) // 定义 mutations, 修改属性
export const mutations = {
setUserInfo(userInfo) {
store.userInfo = userInfo
},
setRoleIds(roleIds) {
store.roleIds = roleIds
}
}

在组件中引用

<template>
<div>
{{ userInfo.name }}
</div>
</template>
<script>
import { store, mutations } from '../store'
export default {
computed: {
userInfo() {
return store.userInfo
}
},
created() {
mutations.setUserInfo({
name: '逐梦'
})
}
}
</script>

深度watchwatch立即触发回调,我可以监听到你的一举一动

Vue.extend是一个全局Api,平时我们在开发业务的时候很少会用到它,但有时候我们希望可以开发一些全局组件比如Loading,Notify,Message等组件时,这时候就可以使用Vue.extend

基础用法

比如一个列表页,我们希望用户在搜索框输入搜索关键字的时候,可以自动触发搜索,此时除了监听搜索框的change事件之外,我们也可以通过watch监听搜索关键字的变化

<template>
<!--此处示例使用了element-ui-->
<div>
<div>
<span>搜索</span>
<input v-model="searchValue" />
</div>
<!--列表,代码省略-->
</div>
</template>
<script>
export default {
data() {
return {
searchValue: ''
}
},
watch: {
// 在值发生变化之后,重新加载数据
searchValue(newValue, oldValue) {
// 判断搜索
if (newValue !== oldValue) {
this.$_loadData()
}
}
},
methods: {
$_loadData() {
// 重新加载数据,此处需要通过函数防抖
}
}
}
</script>

立即触发

通过上面的代码,现在已经可以在值发生变化的时候触发加载数据了,但是如果要在页面初始化时候加载数据,我们还需要在created或者mounted生命周期钩子里面再次调用$_loadData方法。不过,现在可以不用这样写了,通过配置watch的立即触发属性,就可以满足需求了

// 改造watch
export default {
watch: {
// 在值发生变化之后,重新加载数据
searchValue: {
// 通过handler来监听属性变化, 初次调用 newValue为""空字符串, oldValue为 undefined
handler(newValue, oldValue) {
if (newValue !== oldValue) {
this.$_loadData()
}
},
// 配置立即执行属性
immediate: true
}
}
}

深度监听(我可以看到你内心的一举一动)

一个表单页面,需求希望用户在修改表单的任意一项之后,表单页面就需要变更为被修改状态。如果按照上例中watch的写法,那么我们就需要去监听表单每一个属性,太麻烦了,这时候就需要用到watch的深度监听deep

export default {
data() {
return {
formData: {
name: '',
sex: '',
age: 0,
deptId: ''
}
}
},
watch: {
// 在值发生变化之后,重新加载数据
formData: {
// 需要注意,因为对象引用的原因, newValue和oldValue的值一直相等
handler(newValue, oldValue) {
// 在这里标记页面编辑状态
},
// 通过指定deep属性为true, watch会监听对象里面每一个值的变化
deep: true
}
}
}

随时监听,随时取消,了解一下$watch

有这样一个需求,有一个表单,在编辑的时候需要监听表单的变化,如果发生变化则保存按钮启用,否则保存按钮禁用。这时候对于新增表单来说,可以直接通过watch去监听表单数据(假设是formData),如上例所述,但对于编辑表单来说,表单需要回填数据,这时候会修改formData的值,会触发watch,无法准确的判断是否启用保存按钮。现在你就需要了解一下$watch

export default {
data() {
return {
formData: {
name: '',
age: 0
}
}
},
created() {
this.$_loadData()
},
methods: {
// 模拟异步请求数据
$_loadData() {
setTimeout(() => {
// 先赋值
this.formData = {
name: '子君',
age: 18
}
// 等表单数据回填之后,监听数据是否发生变化
const unwatch = this.$watch(
'formData',
() => {
console.log('数据发生了变化')
},
{
deep: true
}
)
// 模拟数据发生了变化
setTimeout(() => {
this.formData.name = '张三'
}, 1000)
}, 1000)
}
}
}

根据上例可以看到,我们可以在需要的时候通过this.$watch来监听数据变化。那么如何取消监听呢,上例中this.$watch返回了一个值unwatch,是一个函数,在需要取消的时候,执行 unwatch()即可取消

实战技巧,Vue原来还可以这样写的更多相关文章

  1. Unity User Group 北京站图文报道:《Unity虚拟现实实战技巧》

    时间来到了盛夏,北京UUG活动也来到了第八期.本次活动的主题为<Unity虚拟现实实战技巧>,为此我们邀请了4位资深的行业大神.这次我们仍然在北京市海淀区丹棱街5号微软大厦举行活动,在这里 ...

  2. webpack快速入门——实战技巧:watch的正确使用方法,webpack自动打包

    随着项目大了,后端与前端联调,我们不需要每一次都去打包,这样特别麻烦,我们希望的场景是,每次按保存键,webpack自动为我们打包,这个工具就是watch! 因为watch是webpack自带的插件, ...

  3. webpack快速入门——实战技巧:webpack优化黑技能

    1.抽离jquery,vue(多个第三方类库抽离) 修改入口文件(webpack.config.js中) entry: { entry: './src/entry.js', jquery:'jquer ...

  4. Unit04: 实战技巧 、 登录

    Unit04: 实战技巧 . 登录 使用注解方式简化Unit04的小程序. 1. 基于注解的springmvc应用程序的开发 (1)编程步骤 step1. 导包. step2. 添加spring配置文 ...

  5. Android实战技巧:深入解析AsyncTask

    AsyncTask的介绍及基本使用方法 关于AsyncTask的介绍和基本使用方法可以参考官方文档和Android实战技巧:多线程AsyncTask这里就不重复. AsyncTask引发的一个问题 上 ...

  6. Jlink使用技巧之合并烧写文件

    前言 IAP(In-application-programming),即在应用中编程.当产品发布之后,可以通过网络方便的升级固件程序,而不需要拆机下载程序.IAP系统的固件一般由两部分组成,即Boot ...

  7. C#并行Parallel编程模型实战技巧手册

    一.课程介绍 本次分享课程属于<C#高级编程实战技能开发宝典课程系列>中的一部分,阿笨后续会计划将实际项目中的一些比较实用的关于C#高级编程的技巧分享出来给大家进行学习,不断的收集.整理和 ...

  8. webpack快速入门——实战技巧:开发和生产并行设置

    package.json中,devDependencies和dependencies是不同的 devDependencies:开发依赖 dependencies:生产依赖(线上) 1.安装生产环境的依 ...

  9. webpack快速入门——实战技巧:webpack模块化配置

    首先在根目录,新建一个webpack_config文件夹,然后新建entry_webpack.js文件,代码如下: const entry ={}; //声明entry变量 entry.path={ ...

随机推荐

  1. Java四种权限修饰符

    四种权限修饰符

  2. MySQL国内镜像下载地址

    最近重新下载MySQL发现官网下载速度不是一般的慢,官网下载要几个钟而且一不注意就被取消下载了,实在受不了 可以使用sohu的镜像:http://mirrors.sohu.com/mysql/MySQ ...

  3. (Java实现) 零件分组

    零件分组(Stick)-动态规划-中高级 Case Time Limit:1000MS Time Limit: 3000MS Memory Limit: 65536K Total Submission ...

  4. Java实现 LeetCode 520 检测大写字母

    520. 检测大写字母 给定一个单词,你需要判断单词的大写使用是否正确. 我们定义,在以下情况时,单词的大写用法是正确的: 全部字母都是大写,比如"USA". 单词中所有字母都不是 ...

  5. Java实现 LeetCode 321 拼接最大数

    321. 拼接最大数 给定长度分别为 m 和 n 的两个数组,其元素由 0-9 构成,表示两个自然数各位上的数字.现在从这两个数组中选出 k (k <= m + n) 个数字拼接成一个新的数,要 ...

  6. Java实现 蓝桥杯VIP 算法提高 11-2删除重复元素

    算法提高 11-2删除重复元素 时间限制:10.0s 内存限制:256.0MB 问题描述 为库设计新函数DelPack,删除输入字符串中所有的重复元素.不连续的重复元素也要删除. 要求写成函数,函数内 ...

  7. Java实现 LeetCode 69 x的平方根

    69. x 的平方根 实现 int sqrt(int x) 函数. 计算并返回 x 的平方根,其中 x 是非负整数. 由于返回类型是整数,结果只保留整数的部分,小数部分将被舍去. 示例 1: 输入: ...

  8. hadoop知识整理(5)之kafka

    一.简介 来自官网介绍: 翻译:kafka,是一个分布式的流处理平台.LinkedIn公司开发.scala语言编写.   1.支持流处理的发布订阅模式,类似一个消息队列系统: 2.多备份存储,副本冗余 ...

  9. 如何在Centos7安装swoole的PHP扩展

    1. 下载swoole源代码包 wget -c https://github.com/swoole/swoole-src/archive/v2.0.8.tar.gz 2.tar -zxvf v2.0. ...

  10. [ARC101B]Median of Medians

    题目   点这里看题目. 分析   看到中位数,当然会想到二分答案.   考虑检查答案.自然,我们需要找出中位数小于二分值\(k\)的区间的个数.考虑构造一个\(b\): \[b_i=(-1)^{[a ...