vue中的computed与watch

computed计算属性，与data、methods、watch并列写，一定要有返回值，通常用于对于原状态的一种计算/变换  例如对原数组筛选等。

computed数据筛选实例：

<div id="app">
			<div>{{reverseMsg}}</div>
			<div>
				<ul>
					<li v-for="(item,index) in filterStuList">{{item.name}}--{{item.sex==='m'?"男":"女"}}</li>
				</ul>
			</div>
			<div>
				<select name="" v-model="filter">
					<option value="m">男</option>
					<option value="f">女</option>
					<option value="">全部</option>
				</select>
			</div>
		</div>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.37/vue.global.js"></script>
		<script>
			var app=Vue.createApp({
				data:function(){
					return{
						msg:"Hello",
						filter:"",
						stuList:[
							{name:'jack',sex:"m"},
							{name:'jack2',sex:"f"},
							{name:'jack3',sex:"f"},
							]
					}
				},
				methods: {},
				computed:{
					//计算属性  一定要有返回值
					reverseMsg(){
						return this.msg.split("").reverse().join("");
					},
					filterStuList(){
						//filter返回回调函数结果为true的数据的数组
						if(this.filter===""){
							return this.stuList;
						}
						return this.stuList.filter(stu=>stu.sex==this.filter);
					}
				}
			});
			app.mount("#app");
		</script>

watch侦听器：侦听某个状态  如果状态发生改变就可以触发相应的回调函数。

使用侦听器实现页面的分页效果，监听叫page的状态：

<div id="app">
			<a style="margin-left: 10px;" href="#" v-for="item in 6" @click.prevent="page=item">{{item}}</a>
			<ul>
				<li v-for="(item,index) in productList">{{item.name}}</li>
			</ul>
		</div>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.37/vue.global.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.27.2/axios.min.js"></script>
		<script>
			var app=Vue.createApp({
				data:function(){
					return{
						page:1,
						productList:[]
					}
				},
				methods: {
					
				},
				async created(){
					/* const res=await axios.get("http://www.xxx.top:8090/product/",{
						params:{
							page:this.page
						}
					});
					this.productList=res.data.results; */
				},
				watch:{
					//使用侦听器实现页面的分页效果
					//监听叫page的状态
					/* async page(val,oldValue){
						console.log("page改变了");
						console.log(`新值：${val} 旧值：${oldValue}`);
						const res=await axios.get("http://www.xxx.top:8090/product/",{
							params:{
								page:val
							}
						});
						this.productList=res.data.results;
					}, */
					page:{
						immediate:true,//配置项immediate  立即  侦听器被创建   （初始化的时候就被创建）
						async handler(val){
							const res=await axios.get("http://www.xxx.top:8090/product/",{
								params:{
									page:val
								}
							});
							this.productList=res.data.results;
						}
					}
				}
			});
			app.mount("#app");
		</script>