计算属性 v-model

计算属性 computed

概念

引出：传统的{{}}支持运算，也能包含api语法等，但是在{{}}放入大量的业务代码会导致vue的维护成本增加（性能键高低），所以如果要渲染一些经过计算之后的数据，我们可以使用计算属性

概念：当我们想从源数据的基础上拿到新数据，并渲染到页面同时也不会改变源数据，则可以使用计算属性

语法

定义:

简写版：(功能简单，但用得最多)

computed:{
	自定义计算属性(){
		return 值
	}
}

完整版(功能完整)

前提：如果要直接改变计算属性的值，则必须用完整语法，否则报错[Vue warn]: Computed property "sum" was assigned to but it has no setter.

computed:{
	自定义计算属性:{
		get(){
			return  值
		},
		set(val){}
	}
}

使用：

在tempalte中通过{{}}使用

demo：计算两数之和

<template>
    <div>
            {{sum}}
    </div>
</template>

<script>
export default {
    
    data(){
        return{
            n1:1,
            n2:2
        }
    },

     computed:{
        sum(){
            return this.n1+this.n2
        }
     }



}
</script>

特点

1 一旦源数据发生了改变，则自动重新计算
2 页面加载时，计算属性会自动执行一次（前提是要渲染该计算属性）
3 计算属性和data属性是同等地位的(template既可以渲染data定义的数据，也可以渲染computed计算的属性)，意味着名子不能相同
4 自带缓存

使用场景

1  渲染 
2  基于data中的数据进行“计算”
3  比如 购物车的 总计，比如多选

练习

1 通过计算属性渲染两数之和,测试点击按钮改变任意一个数，验证计算属性是否会自动重新计算（使用简写版）

2 已知：xing:张  ming：三  通过计算属性渲染 “张三” ，点击按钮改变计算属性，达到重新渲染的目的(使用完整版)

面试题

computed和methods的区别：
1 computed当成属性来使用（直接写属性即可），methods当成方法来使用(需要通过()来执行)
2 computed 自带缓存，methods没有缓存
一般：缓存的使用场景：数据量很大，并且没有改变时，则直接从缓存中取性能一定比重新计算并获取要快

作业：

全选练习 

监听 watch

概念

通过watch能够监听任何属性的变化，一旦，监听的属性发生了变化，就能够自动触发函数，我们就能够在函数中写自己的业务

语法

1 简写版 --只能监听基本数据类型

watch:{
	要监听的属性(newVal,oldVal){
		//自己的业务逻辑
	}
}

如果非得用简写版来监听对象（本质还是在监听对象的属性，并且该属性必须是基本数据类型）

"data定义的对象.属性"(newVal){
       console.log(newVal);
    },

2 完整版（用得多,能够监听对象）

watch:{
	要监听的属性:{
		handler(newVal){
			//自己的业务
		},
		//深度监听(就能够监听对象)
		deep:true,
		//立即监听，
        immediate:true
	},
	
}

特点：

1 可以监听data和computed定义的属性，
2 如果监听的是data，则一旦数据发生改变，就会触发监听
  如果监听的是computed，则一旦computed中依赖的data数据发生改变导致计算属性发生改变，也能触发监听
3一般情况下，我们只需要newVal
4 默认情况下不会立即执行，需要配置

面试题：

watch和computed的区别

共同点：都在监听属性的变化，计算属性一旦检测到属性的改变，会重新计算，监听检测到数据的改变会执行自己业务
不同点： 
	1 计算属性有缓存，而监听没有
	2 计算属性多用于渲染，监听不是用来渲染的，而是用来做其他业务（发ajax。。。。）
	3 计算属性必须有return，而监听不需要写return
	4 计算属性首次就会监听，而监听必须要搭配immediate:true才能做到
	

套路：如何判断到底什么时候用计算属性和监听

当 “多” 个元素 影响 “一” 个元素时用计算属性  -》总计
当 “一” 和元素 影响 “多” 个元素时用到监听

表单双向绑定

双向：

自己实现：

  改变视图-----》自动改变数据 （input/change）--->input-文本框   change-单选框、复选框、下拉列表
  改变数据----》自动视图   （利用vue的响应式系统）

面试题：MVVM是是什么？

M : model  (数据) 
V : view   （视图）
VM :viewModel (视图数据引擎)

核心思想：我们只需要关注：视图和数据,不需要关注中间转换，只要数据发生改变、则视图自动渲染，同理，视图发生改变，则数据也会同步
优点：维护方便、解耦、方便测试

语法糖

在保持功能不变的前提下，能够简化代码量
增加了程序员可读性

指令：v-model

利用vue提供v-model来实现表单的双向绑定

v-model指令只能用于表单元素：input 、 select、 textarea

什么是v-model

v-model 就是一个  value和input/change事件 的 语法糖

1 文本框

<input type="text" v-model="stu.username" >
  data() {
    return {
        stu:{
          username:"",
          
        }
        
    };
  },

文本框中 不能出现value

2 单选框

        性别
        男 <input type="radio"  v-model="stu.gender" value="1">
        女 <input type="radio"  v-model="stu.gender" value="0">
        
        
       data() {
        return {
            stu:{
              username:"",
              gender:"1"
            }

        };

3 复选框

分情况使用：

情况1：如果想要获取被勾选的值，则v-model应该绑定的是数组

        吃饭 <input type="checkbox" v-model="stu.hobby" value="吃饭">
        睡觉 <input type="checkbox" v-model="stu.hobby" value="睡觉">
        打豆豆 <input type="checkbox" v-model="stu.hobby" value="打豆豆">
        
        
        
  data() {
    return {
        stu:{
          username:"",
          gender:"1",
          hobby:["睡觉"]
        }
    };
  },

情况2：如果只是想要查看是否被勾选，而不是查看勾选的值，则v-model应该绑定boolean

        吃饭 <input type="checkbox" v-model="isb1">
        睡觉 <input type="checkbox" v-model="isb2" >
        打豆豆 <input type="checkbox" v-model="isb3" >
        
        
        
  data() {
    return {
        
        isb1:false,
        isb2:false,
        isb3:true

4 下拉列表

        <select v-model="stu.edu"> 
          <option value="1">小学</option>
          <option value="2">中学</option>
          <option value="3">大学</option>
        </select>
        
        
        
  data() {
    return {
        stu:{
          username:"",
          gender:"1",
          hobby:["睡觉"],
          edu:2
        },

v-model的修饰符

1 lazy 失焦时触发

<input type="text" v-model.lazy="stu.username" >

2 number 如果写的是数字，会自动转为number

<input type="text" v-model.number="stu.username" >

3 trim 去掉两端的空格

<input type="text" v-model.trim="stu.username" >