methods & computed & watch区别

1.methods

1. 里面写的是函数，需要手动调用，
2. methods 每次触发页面渲染都会重新执行里面的函数
3. 在 methods 中主要书写业务逻辑
4. 在 methods 中访问 data 数据可以直接用 this.xxx 来访问

2.computed

1. 里面写的是属性，需要响应式变化来重新计算属性
2. 属性的结果会被缓存
3. 设计的目的只是为了简单运算。在模板中放入太多的逻辑会让模板过重且难以维护。所以，对于任何复杂逻辑，应当使用计算属性。
4. computed其实是既可以当做属性访问也可以当做方法访问
5. computed的由来还有一个重要原因，就是防止文本插值中逻辑过重，导致不易维护

3.Computed与methods比较

函数调用与属性调用

methods是函数调用 调用时必须带上() {{methodTest()}}
computed是属性调用 计算属性上定义的方法我们是以属性访问的形式进行调用 {{computedTest}}

缓存功能

methods 不会被缓存，每次方法执行都会重新计算结果
computed 计算属性具有缓存功能，只有当计算所依赖的属性发生变化时才会重新执行计算

<!--HTML部分-->
<div id="app">
    <h1>{{message}}</h1>
    <p class="test1">{{methodTest}}</p>
    <p class="test2-1">{{methodTest()}}</p>
    <p class="test2-2">{{methodTest()}}</p>
    <p class="test2-3">{{methodTest()}}</p>
    <p class="test3-1">{{computedTest}}</p>
    <p class="test3-2">{{computedTest}}</p>
</div>

<!--script部分-->
let vm = new Vue({
    el: '#app',
    data: {
        message: '我是消息，'
    },
    methods: {
        methodTest() {
            return this.message + '现在我用的是methods'
        }
    },
    computed: {
        computedTest() {
            return this.message + '现在我用的是computed'
        }
    }
})

4.watch

1. 起到监听作用，不仅能监听属性值的变化，还能监听路由的变化
2. 监听的data数据中必须定义变量,watch才能正常使用
3. watch是一个对象 键为需要观察的表达式 值是对应的回调函数||方法名||包含选项的对象
4. 可以用deep方法进行深度监听对象内部数据的变化

监听data

  <div id="app">
      <input type="text" v-model="firstname" />
    </div>
    <script type="text/javascript">
      var vm = new Vue({
        el:"#app",
        data:{
          firstname:"",
          lastname:""
        },
        methods:{},
        watch:{
          firstname:function(){
            console.log(this.firstname)
          }
        }
      })
    </script>

监听路由

  <div id="app">
      <!--
        由于Vue-router的hash匹配原则所以我们需要在原定义的路径上加一个#号
      -->
<!--  <a href="#/login" rel="external nofollow" >登录</a>
      <a href="#/register" rel="external nofollow" >注册</a>-->
      <router-link to="/login" tag="span">登录</router-link>
      <router-link to="/register">注册</router-link>
      <router-view></router-view>
    </div>
  </body>
  <script>
    var login={
      template:'<h1>登录组件</h1>'
    }
    var register={
      template:'<h1>注册组件</h1>'
    }
    var routerObj = new VueRouter({
      routes:[
      //此处的component只能使用组件对象，而不能使用注册的模板的名称
        {path:"/login",component:login},
        {path:"/register",component:register}
      ]
    })
    var vm = new Vue({
      el:'#app',
      data:{
      },
      methods:{
         
      },
      router:routerObj,//将路由规则对象注册到VM实例上
      watch:{
        '$route.path':function(newValue,OldValue){
            console.log(newValue);
            console.log(OldValue);
        }
      }
    })
  </script>

5.computed和watch区别

1. watch和computed都是以Vue的依赖追踪机制为基础的，它们都试图处理这样一件事情：当某一个数据（称它为依赖数据）发生变化的时候，所有依赖这个数据的“相关”数据“自动”发生变化，也就是自动调用相关的函数去实现数据的变动。
2. 对methods:methods里面是用来定义函数的，很显然，它需要手动调用才能执行。而不像watch和computed那样，“自动执行”预先定义的函数
3. 1.watch擅长处理的场景：一个数据影响多个数据
4. computed擅长处理的场景：一个数据受多个数据影响