Vue生命周期与watch监听器

vue生命周期

• 创建阶段 created（） 初始化渲染 响应式数据 负责进入页面就发送请求
• 挂载阶段 mounted（） 渲染模板 操作dom 负责渲染DOM页面元素
• 更新阶段 updated 数据修改 更新视图
• 销毁阶段 destoroy

vue的八个钩子函数即此四个阶段以及此四个阶段前的before 阶段

注意vue的生命周期函数要写到与data（），method（）同级，而不是写在method里面。

watch监听器

实时监测数据变化，如实现一个实时翻译项目：

watch：{

word（value）{

const res =axios（{url：‘翻译api-url’ params：{value}}）

}}

成功翻译，但是实时监视导致输入一个字符翻译一个字符 ，期望：停止输入一段时间后再开始翻译。此即防抖机制，简单的实现就是加一个计时器，setTimeout，隔一段时间再执行。

此中，即使加入，其实还是输入几次翻译几次，只不过每次都是间隔一会执行。解决方法：

在每次输入的时候关闭计时器，然后再开启，这样的话每次输入计时器都会一直关闭，直到输入结束才开始计时调用。

v-if 和v-show 基本一样 区别在于v-if是完全隐藏，v-show会把资源加载过来，切换频繁的时候用v-show速度更快。