从零开始学习Vue（六）| 一起学系列

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第6天，点击查看活动详情

• 侦听器
  • 用于监听数据变化并执行指定操作
  • 为了监听对象内部值的变化，需要将watch书写为对象，并设置选项deep：true，这时通过handler设置处理函数
  • 注意：当更改（非替换）数组或对象时（其中的内容或属性，不是直接赋予其新值），回调函数中的新值与旧值相同，因为他们的引用都指向同一个数组、对象。数组不需要deep设置。Vue监听不到数组的索引和length方法。修改数组数据时，可以通过Vue.set(vm.数组名,索引,新数据值)
• Vue DevTools
  • Vue.js官方提供的用来调试Vue应用的工具
  • 注意事项：
    • 网页必须应用了Vue.js功能才能看到Vue DevTools
    • 网页必须使用Vue.js而不是Vue.min.js
    • 网页需在http协议下打开，而不是使用file协议本地打开，可借助vscode中的live server插件
• Vue.js生命周期
  • 通过设置生命周期函数，可以在生命周期的特定阶段执行功能
  • 生命周期函数也叫做生命周期钩子
  • 创建阶段：
    • beforeCreate：实例初始化之前调用，data、methods还没创建完毕，很少使用
    • created：实例创建后调用，比较重要
    • beforeMount：实例挂载之前调用，页面内容还没添加到DOM中，被渲染出来
    • mounted：实例挂载完毕，比较重要
  • 特点：每个实例只执行一次
  • 运行阶段：
    • beforeUpdate：数据更新后，视图更新前调用
    • updated：视图更新后调用
  • 销毁阶段:
    • beforeDestory：实例销毁之前调用
    • destroyed：实例销毁后调用
      本期的内容就到这里啦！让我们明天一起继续学习Vue.js吧!