发布文章 （八）-解决当你在修改文章时候，点击发布文章，组件不更新 区别：computed-计算属性：依赖其他数据 & watch-侦听器：监听数据变化，进行其他操作

• 什么程度叫学会了？——独立的完成当天的代码。
  • 先看笔记（视频），对照笔记，敲出代码，认为吸收一半。
  • 自己独立的再来次。

13-回顾

• 发布文章

  • 使用富文本
  • 封装封面图组件
  • 发布业务
  • 合并修改业务

• 作业：

  解决当你在修改文章时候，点击发布文章，组件不更新。

  • **原因：**路由对应的组件，路由规则发生改变，组件就会更新。
  • **思路：**监听地址栏传参的改变，手动更新组件（更新数据）
    • $route.query.id 获取的传参 （修改 有值 ----> 无值 发布）
    • 需要是基础知识：watch 侦听器

• 回顾

• 计算属性和侦听器：https://cn.vuejs.org/v2/guide/computed.html

  • computed-计算属性：
    • 当你需要的数据，需要依赖data中的数据，且经过复杂逻辑的处理才能得到，此时使用。
    • 特点：当你依赖的数据发生改变，计算属性也会改变。
    • 一定需要返回值。
  • watch-侦听器：
    • 监听到一项数据（通过this使用的所有数据）的变化。
    • 适合：在异步操作或者开销较大（频繁操作/处理逻辑复杂）操作 （当然任何操作都使用watch）
    • 总结：监听数据变化的时候，去干一些事情。

语法：

new Vue({
    data(){
        return {
            msg:'',
        }
    },
    watch:{
        // msg 就是的名字
        msg:function(newVal,oldVal){
            // 当msg对应的数据发生改变触发
        }    
    }
})

piblish/index.vue中的export里添加属性：

watch: {
    // 监听地址栏ID传参变化
     //使用：‘’$route.query.id“:function(){}  监听到对象下属性变化。
    '$route.query.id': function (newVal, oldVal) {
      console.log(newVal, oldVal)
      // 修改切到发布的时候  重置文章数据 清空文章ID
      this.articleForm = {
        title: '',
        content: '',
        cover: {
          type: 1,
          images: []
        },
        channel_id: null
      }
      this.articleId = null
    }
  },