uniapp-计算属性、watch 侦听器、props验证

一、计算属性

计算属性本质上就是一个 function 函数，它可以实时监听 data 中数据的变化，并 return 一个计算后的新值

1.声明与使用计算属性 

计算属性需要以 function 函数的形式声明到组件的 computed 选项中：

使用时计算属性必须当做普通属性使用： 

•  计算属性必须定义在 computed 节点中
• 计算属性必须是一个 function 函数
• 计算属性必须有返回值

2.计算属性 vs 方法 

相对于方法来说，计算属性会缓存计算的结果，只有计算属性的依赖项发生变化时，才会重新进行运算。

示例代码如下：

<!-- 计算属性VS方法计算 -->
<view class="">
		<input type="text" v-model="count" />
		<p>{{ count }}乘以2的值为{{ plus }}</p>
		<p>{{ count }}乘以2的值为{{ plus }}</p>//只输出一次：计算属性执行了
		<p>{{ count }}乘以2的值为{{ plus1() }}</p>
		<p>{{ count }}乘以2的值为{{ plus1() }}</p>//输出两次：方法执行了
</view>

<script>
export default {
	data() {
		return {
			count: 1
		};
	},
	computed: {
		plus() {
            console.log('计算属性执行了')
			return this.count * 2;
		}
	},
	methods: {
		plus1() {
            console.log('方法执行了')
			return this.count * 2;
		}
	}
};
</script>

 二、watch侦听器

watch 侦听器允许开发者监视数据的变化，从而针对数据的变化做特定的操作。

1.基本语法

在watch节点下，定义自己的侦听器

<script>
      export default {
        data() {
          return {
            username:'zk'
          };
        },
        watch:{
            //监听 username的值的变化
            //在形参列表中，第一个值是“变化后的新值”，第二个值是“变化前的旧值”
            username(newVal,oldVal){
                console.log(newVal,oldVal);
            }
        }
      };
</script>

2.immediate、deep 选项

监听复杂数据类型

watch: {
	list:{
		  deep:true, // 开启深度监听 专门对付复杂数据类型
		  immediate:true, // 首次监听 一打开页面就想监听
		  handler: function (newValue, oldValue){
				this.watchAllPrice = 0
				this.list.forEach((it, idx) => {
					if (it.status == true) {
						this.watchAllPrice = this.watchAllPrice + it.price * it.num
					}
				})				
		}			
   }
},

注：handler的函数格式不要写成箭头函数，否则拿不到当前的vue实例

三、props验证 

在封装组件时对外界传递过来的 props 数据进行合法性的校验，从而防止数据不合法的问题。

1. 对象类型的 props 节点

对象类型的 props 节点提供了多种数据验证方案，例如： ① 基础的类型检查 ② 多个可能的类型 ③ 必填项校验 ④ 属性默认值 ⑤ 自定义验证函数

1.1基础的类型检查

 2.多个可能的类型

如果某个 prop 属性值的类型不唯一，此时可以通过数组的形式，为其指定多个可能的类型

props：{
    //propsA属性的值可以是“字符串”或“数字”
    propA:[String,Number],
}

3. 必填项校验

如果组件的某个 prop 属性是必填项，必须让组件的使用者为其传递属性的值。

4.属性默认值

在封装组件时，可以为某个 prop 属性指定默认值

示例代码如下： 

props: {
  //通过“配置对象”的形式，来定义propB属性的“验证规则”
  propB:{
    type:String, //当前属性值必须是String字符串类型
	required:true, //当前属性的值是必填项，如果使用者没指定propsB属性的值，则在终端进行警告提示
	default:'张三' //如果使用者没有指定propB的值，则propB属性的默认值为 张三
	}
}