watch 绑定监听立即执行 / computed 计算属性传参 / router 传值

最近公司需要一个新的中后台系统，打算使用一下新的UI组件 使用 Ant Design Vue ，直接使用了 Ant Design Vue Admin 。对于我这种刚入行一年的，看看大佬的代码，实现思路也是一种成长的方式。

总结一下新学到的知识和思路

• 问题描述：
  在modal组件中放了一个组件，父组件传值给子组件，子组件使用watch监听，结果在每次是第一次打开弹窗的时候，watch并不能监听到参过去的参数变化。 应该是因为 第一次打开弹窗，绑定上了监听，监听的值并没有发生变化，所以没有触发
• 解决方法

1. 使用 $refs.xxx去调用方法传值。
2. 直接使用Vue官方提供给watch的immediate 属性，官方解释为:在选项参数中指定 immediate: true 将立即以表达式的当前值触发回调。理解应该是当绑定上监听的时候就会执行一次监听。

watch

学习真的是应该也把api看一遍，光看文档还是了解的不够全面…

watch:{
	name:function(newVal,oldVal){},
	name2:'watchName', // 方法名
	name3:{
		handler(newVal,oldVal){
		},
		immediate:true // 绑定监听的时候就会立即执行一次
	},
	name4:{
		handler(val, oldVal) {
		},
      	deep: true // 监听对象的属性发生变化时执行，无论嵌套多深
    },
}

路由传参

1. {query: 'vue'} 传递的值会出现在地址栏上
2. {param: 'vue'}这种方式传值必须 通过 { name:"user" }的形式进行路由跳转，使用{ path:"user"} 的形式，{param: 'vue'}传值会失效。这种传值方式在刷新页面后会丢失值。

---

v-for in / of

和 for in / for of 基本一样，of 适合用来遍历数组，in 适合用来遍历对象

<p v-for='(key,title,index) in obj' :key='index'>{{key}}--{{title}}--{{index}}</p>

<p v-for='(item,index) of arr' :key='index'>{{item}}--{{index}}</p>

obj: {
      name: "小黑",
      gender: "男",
      age: 25
     },
arr:['a','b','c']

• 问题描述：
  想要计算属性传参数，根据参数和依赖的另外一个值，进行处理。
  • 计算属性一般用在一个值依赖另一个值的时候。他会返回处理完的值。
  • 观察一下可以发现，当计算属性返回一个函数的时候，就可以在计算属性后面加一个（），就相当于了函数执行，里面放上参数就实现了传参。

<template>
	<span>{{name(2)}}</span> <!-- 8 -->
	<span>{{name(3)}}</span> <!-- 9 -->
</template>
<script>
computed:{
	name:{
		return function(val){
			return val + 6;
		}	
	}
}
</script>