<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>watch监听</title>
<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/vue.js" ></script>
</head>
<body>
<!-- 需求：在搜索框中输入123，自动向后台发送AJAX请求，把123提交给后台，然后后台返回一些数据给你 -->
<div id="app">
<input type="text" v-model = "serachInfo">
<div v-if = "showSeraching" >正在搜索。。。。</div> <!-- 用户正在输入的时候显示这句话.其余时刻不显示 -->
<ul>
<li v-for = "item in result">{{item}}</li>
</ul>
</div>
<script type="text/javascript">
new Vue({
el : "#app",
data : {
serachInfo : "",
showSeraching : false,
result : []
},
watch : {
serachInfo : function(query){
//query就是我们最新输入的值，可以打印一下进行验证
//console.log(query);
this.showSeraching = true;
console.log(this); //vue
//我们没有后台，可以用下面函数去模拟一下异步操作
setTimeout(function(){
//该函数里面的this指向在严格模式下什么都没有，在非严格模式下是window。看this指向就看谁调用它，在这个函数上，没有东西调用这个function
console.log(this); //window
this.result = ["html","css","js"]
},500)
}
}
})
</script>
</body>
</html>第一个打印出来的是vue实例，第二个是window。
二者不一致，有两种解决办法：
第一种是 使用箭头函数。原因：箭头函数里面没有this指向，他的this指向借助于他父级的作用域。这里它的父级作用域是serachInfo : function(query)函数，这个函数指向的是vue实例，vue实例就获取出来了。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>watch监听</title>
<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/vue.js" ></script>
</head>
<body>
<!-- 需求：在搜索框中输入123，自动向后台发送AJAX请求，把123提交给后台，然后后台返回一些数据给你 -->
<div id="app">
<input type="text" v-model = "serachInfo">
<div v-if = "showSeraching" >正在搜索。。。。</div> <!-- 用户正在输入的时候显示这句话.其余时刻不显示 -->
<ul>
<li v-for = "item in result">{{item}}</li>
</ul>
</div>
<script type="text/javascript">
new Vue({
el : "#app",
data : {
serachInfo : "",
showSeraching : false,
result : []
},
watch : {
serachInfo : function(query){
//query就是我们最新输入的值，可以打印一下进行验证
//console.log(query);
this.showSeraching = true;
console.log(this); //vue
//我们没有后台，可以用下面函数去模拟一下异步操作
setTimeout(()=>{
//该函数里面的this指向在严格模式下什么都没有，在非严格模式下是window。看this指向就看谁调用它，在这个函数上，没有东西调用这个function
console.log(this); //vue
this.result = ["html","css","js"]
},500)
}
}
})
</script>
</body>
</html>第二种方法：把this保存成一个变量
var vm = this;//在这里我们把this实例（vue实例）保存成vm变量了
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>watch监听</title>
<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/vue.js" ></script>
</head>
<body>
<!-- 需求：在搜索框中输入123，自动向后台发送AJAX请求，把123提交给后台，然后后台返回一些数据给你 -->
<div id="app">
<input type="text" v-model = "serachInfo">
<div v-if = "showSeraching" >正在搜索。。。。</div> <!-- 用户正在输入的时候显示这句话.其余时刻不显示 -->
<ul>
<li v-for = "item in result">{{item}}</li>
</ul>
</div>
<script type="text/javascript">
new Vue({
el : "#app",
data : {
serachInfo : "",
showSeraching : false,
result : []
},
watch : {
serachInfo : function(query){
//query就是我们最新输入的值，可以打印一下进行验证
//console.log(query);
this.showSeraching = true;
var vm = this;//在这里我们把this实例（vue实例）保存成vm变量了
//我们没有后台，可以用下面函数去模拟一下异步操作
setTimeout(function(){
//该函数里面的this指向在严格模式下什么都没有，在非严格模式下是window。看this指向就看谁调用它，在这个函数上，没有东西调用这个function
console.log(vm); //vue
this.result = ["html","css","js"]
},500)
}
}
})
</script>
</body>
</html>
最终代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>watch监听</title>
<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/vue.js" ></script>
</head>
<body>
<!-- 需求：在搜索框中输入123，自动向后台发送AJAX请求，把123提交给后台，然后后台返回一些数据给你 -->
<div id="app">
<input type="text" v-model = "serachInfo">
<div v-if = "showSeraching" >正在搜索。。。。</div> <!-- 用户正在输入的时候显示这句话.其余时刻不显示 -->
<ul>
<li v-for = "item in result">{{item}}</li>
</ul>
</div>
<script type="text/javascript">
new Vue({
el : "#app",
data : {
serachInfo : "",
showSeraching : false,
result : []
},
watch : {
serachInfo : function(query){
//query就是我们最新输入的值，可以打印一下进行验证
//console.log(query);
this.showSeraching = true;
var vm = this;
//我们没有后台，可以用下面函数去模拟一下异步操作
setTimeout(function(){
//该函数里面的this指向在严格模式下什么都没有，在非严格模式下是window。看this指向就看谁调用它，在这个函数上，没有东西调用这个function
vm.result = ["html","css","js"];
vm.showSeraching = false;
},500)
}
}
})
</script>
<!-- 、
为什么会有watch和computed的两个属性？
computed会有一个返回值，一个return值，vue会读取这个return值。假如说我们的逻辑操作没有return值，就像上述操作，就得给他一个watch监听操作，而且computed里面必须是一个同步代码，不能写异步代码，因为他会去监听里面的一个变化，去监听需要把computed值变成什么。这是一个同步操作。
而watch可以写一个异步操作。可以没有return返回值。
-->
</body>
</html>