vue中methods、computed和watch三者区别

1. computed计算属性，具有缓存性，属性的结果会被缓存，除非依赖的属性发生改变时，才会重新去计算。主要当作属性来使用

2. methods 方法，表示一个具体的操作，添加一些自定义方法；没有缓存性

3. watch无缓存，主要用来监听某些特定数据的变化，如果要在数据变化的同时进行异步操作或者是比较大的开销，那么watch为最佳选择。

<div id="app">
		<h1>{{message}}</h1>
		<p>{{methodsSpeak}}</p>
		<p>{{methodsSpeak()}}</p>
		<p>{{methodsSpeak()}}</p>
		<p>{{methodsSpeak()}}</p>
		<p>{{computedSpeak}}</p>
		<p>{{computedSpeak}}</p>
	</div>

<script type="text/javascript">

		// 1 . computed是属性调用，而methods是函数调用
		// 2 . computed带有缓存功能，而methods不会被缓存

		// 属性调用：
		// 1 .computed定义的方法我们是以属性访问的形式调用，{{computedSpeak}}
		// 2 .methods定义的方法，我们必须要加上()来调用，{{methodSpeak()}}
		// 缓存功能：
		// 计算属性具有缓存：只有当计算属性所依赖的属性发生改变时，才会重新去计算
		// methods不会被缓存：方法每次都会去重新计算结果。

		new Vue({
			el: "#app",
			data: {
				message: '我是消息，'
			},
			//方法
			methods: {
				methodsSpeak() {
					return this.message + '现在我用的是methods'
				}
			},
			//计算属性  计算属性是根据依赖关系进行缓存的计算，并且只在需要的时候进行更新。
			computed: {
				// computed定义computedSpeak方法会做一次计算，返回一个值，在随后的代码编写中，
				// 只要computedSpeak方法依赖的message数据不发生改变，computedSpeak方法是不会重新计算的
				computedSpeak() {
					return this.message + '现在我用的是computed'
				}
			},
		})
	</script>

<div id="app">
        <input type="text" v-model="name" />
    </div>
    <script type="text/javascript">
        new Vue({
            el: "#app",
            data: {
                name: "",
                title: ""
            },
            // Vue的watch属性可以用来监听data属性中数据的变化
            watch: {
                // 输入框内的值变化多少次，控制台就会打印多少次
                name: function () {
                    console.log(this.name)
                },
                // 同时还可以直接在监听的function中使用参数来获取新值与旧值
                name: function (newValue, OldValue) {
                    console.log(31, newValue);
                    console.log(32, OldValue);
                }
                // watch是观察某一个属性的变化，重新计算属性值。computed是通过所依赖的属性的变化重新计算属性值
                // 如果要在数据变化的同时进行异步操作或者是比较大的开销，那么watch为最佳选择。
            },
        })
    </script>