Vue(二) 计算属性computed、监视属性watch、绑定class和style、条件渲染v-show,v-if；列表v-for，key的原理、收集表单数据、过滤器|

1. 计算属性与监视属性

1.1 计算属性 computed

Vue中的属性指的是data里的内容，利用已有的属性进行计算所得到的叫计算属性。
场景需求：输入姓，名，显示姓-名，并随输入的变化而变化

1、使用插值或方法实现：

<div id="root">
    姓：<input type="text" v-model="firstName"><br /><br />
    名：<input type="text" v-model="lastName"><br /><br />
    <!-- 如果还需对属性进行其他操作，则js表达式会更长
		而插值里的表达式应该写的简单易懂，不应太复杂 -->
    全名插值：{
  
  {firstName.slice(0,3)}}-{
  
  {lastName}}<br /><br />
    <!-- 这里是js表达式，fullName()是调用,得加小括号 -->
     <!--若写两次，就要调用两次 -->
    全名方法：{
  
  {fullName()}}<br /><br />
    全名方法：{
  
  {fullName()}}<br /><br />
</div>
<script>
	const vm = new Vue({
     
     
		el: '#root',
		data: {
     
     
			firstName: '张',
			lastName: '三'
		},	
		methods: {
     
     
			fullName () {
     
     
				return this.firstName + '-' + this.lastName
			}
		}
	})
</script>

当data里的数据发生变化时，Vue模板的内容需要重新被解析，所以函数也会被重新调用。从而实现根据输入框内容实时更新全名。

• 用插值表达式的缺点是：如果数据处理再复杂一点，插值表达式会很复杂
• 用方法实现该效果的缺点是：多次用该数据，就要调用多次函数

2、计算属性的写法：

<div id="root">
    姓：<input type="text" v-model="firstName"><br /><br />
    名：<input type="text" v-model="lastName"><br /><br />
    全名计算属性：{
  
  {fullNameCom}}<br /><br />
    全名计算属性：{
  
  {fullNameCom}}<br /><br />
    全名计算属性：{
  
  {fullNameCom}}<br /><br />
    全名计算属性：{
  
  {fullNameCom}}<br /><br />
</div>
<script>
    const vm = new Vue({
     
     
        el: '#root',
        data: {
     
     
            firstName: '张',
            lastName: '三'
        },
        //计算属性
        computed: {
     
     
            fullNameCom: {
     
     
                get () {
     
     
                    // 此处的this指向的是vm；改为箭头函数则不指向vm了
                    console.log('get读取属性');
                    return this.firstName + '-' + this.lastName
                },
                set (value) {
     
     
                    console.log('set', value);
                    this.firstName = value.split('-')[0]
                    this.lastName = value.split('-')[1]
                }
            }
        },
    })
</script>

几点说明：
（1） 计算属性
计算属性最终会出现在vm上(以属性的形式，不是对象的形式)，直接读取使用即可。 如果计算属性要修改，必须写set函数去响应修改。
计算属性底层借助了Object.definepeoperty方法提供的getter和setter方法。
data里的数据放在了vm._data里，但是计算属性并未放在vm._data里，而是放在vm身上

（2） 计算属性的get方法

get方法是用来获取计算属性的，在两种情况下会执行：

• 初次读取fullNameCom时。
• 当所依赖的属性发生变化时

虽然代码中调用了4次计算属性，但是控制台只打印了一次get读取属性，即只调用了一次get方法，这是因为会把初次读取的计算属性放入缓存中。与methods相比，内部有缓存机制（复用），效率更高。

3. 计算属性的set方法
当fullNameCom被修改时，set方法会被调用，进而修改data中的属性，进而重新计算fullNameCom的值。

一般都不会写set方法。

简写形式：
当不考虑修改，只考虑读取(get)时，可简写为

const vm = new Vue({
   
   
    ...
    computed: {
   
   
        fullNameCom () {
   
   
            // function默认指的就是get方法
            console.log('get读取属性');
            return this.firstName + '-' + this.lastName
        }
    }
})

1.2 监视属性 watch

watch基本使用

• 当被监视的属性变化时, 回调函数(handler)自动调用, 进行相关操作
• 监视的属性(data中的属性或计算属性)必须存在，才能进行监视！！(如果不存在，也不会报错)
• 监视的两种写法：
  • new Vue时传入watch配置
  • 通过vm.$watch监视

<div id="root">
    <h1>今天天气很{
  
  {info}}</h1>
    <!-- 当绑定事件@click=xxx的操作很少时，也可以直接写在xxx里面 -->
    <button @click="isHot =!isHot">切换天气</button>
</div>
<script>
    const vm = new Vue({
     
     
        el: "#root",
        data: {
     
     
            isHot: true
        },
        computed: {
     
     
            info () {
     
     
                return this.isHot ? '炎热' : '凉爽'
            }
        },
        watch: {
     
     
	        isHot: {
     
     
	          immediate: true, // 默认是false,true意味着初始化的时候调用一下handler
	          handler (newvalue, oldValue) {
     
     
	            console.log('isHot:改为' + newvalue, oldValue);
	          }
          }
        }
    })
    //写法2：
    vm.$watch('isHot', {
     
     
      handler (newValue, oldValue) {
     
     
        console.log('isHot被修改了', newValue, oldValue)
      }
    })
</script>

immediate属性的应用看4.2的列表过滤

深度监视deep

现在data里有一个多级结构的属性

<div id="root">
    <h1>a的值是{
  
  {numbers.a}}</h1>
    <button @click="numbers.a++">a++</button>
</div>
<script>
    const vm = new Vue({
     
     
        ...
        data: {
     
     
            numbers: {
     
     
                a: 1,
                b: 2,
                obj: {
     
     
                    c: 3
                }
            }
        }
    })
</script>

监视numbers里a的变化：

    const vm = new Vue({
   
   
   ...  
      watch: {
   
   
          // 监视a,正常写属于应该有引号，之前别的属性没写是vue会给加上引号
        'numbers.a': {
   
   
          handler (newvalue, oldValue) {
   
   
            console.log('a被修改为：' + newvalue);
          }
        }
      }
    }