• vue基础_更新检测，key作用
• vue基础_过滤器
• vue基础_计算属性
• vue基础_侦听器

Vue基本使用

v-for 更新检测

由于 v-for 的列表创建方式不受 数组更新的影响，所以使用更新检测

数组非变更方法，返回的是新数组，不会导致 v-for 更新，

除非对数组进行变更，去更新v-for

<li v-for="(value, index) in arr" :key="index">
    {{ value }}
</li>

v-for 基于数组

检测更新

this.$set(this.arr,0,1000)

虚拟DOM

v-for 在更新数据时会根据新虚拟DOM替换旧虚拟DOM 进行高性能的更新

虚拟DOM存在于内存当中

真实存在于网页中的-真实 DOM

template 里的都是模板标签，由vue写的虚拟DOM

本质上是 vue 的对象 const dom，在更新DOM时，对比旧的虚拟DOM做出高性能更新

因为真实DOM里的属性太多，相对于vue的虚拟DOM需要对比的属性少

称之为给真实DOM打补丁（更新）

diff算法

新虚拟DOM 对比 旧虚拟DOM 算法

• 同级比较，根元素变化，整个dom树删除重建
• 同级比较，根元素不变，属性改变更新属性
• 同级比较，根元素不变，子元素/内容改变 插入dom

v-for:key作用

key值只能用唯一不重复的字符串或数字

<template>
  <div>
    <ul id="v-for-object" class="demo">
      <li v-for="value in arr" :key="value.id">
        {{ value.name }}
        <input type="text" />
      </li>
    </ul>
    <button @click="addE">新增一个标签</button>
  </div>
</template>
<script>
//...
    addE() {
      this.arr.splice(1, 0, { id: 8, name: "o" });
    },
</script>

虚拟DOM在更新时会识别到 ，父级元素key的改变所以会重新创建dom树

解决了输入框新插入节点的值遗留问题

key的用法

使用 ID，或索引

动态class、style

:class="{类名，布尔值}"

<template>
	<p :class="{red_str:bool}"}>
        test
    </p>
</template>
<script>
	export default{
        data(){
            return {
                bool:true,
            }
        }
    }
</script>
<script>
    .red_str{
        color:red;
    }
</script>

动态style

<p :style="{color:colorStr}">
    test
</p>
<script>
	export default{
        data(){
            return {
                colorStr:'red',
            }
        }
    }
</script>

案例1_品牌管理

步骤

1. 环境设置
2. 数据显示
3. 新增数据按钮
4. 删除数据按钮（注意id问题）

过滤器

• 全局过滤器

在 main.js 文件中

Vue.filter("过滤器名","回调函数")

Vue.filter("reverse",val=>val.split("").reverseK().join(""))
#vue
<p>{{ Str | reverse }}</p>

• 局部过滤器

在 Vue文件的Script标签中

filters:{过滤器名(){处理函数}}

<template>
	<p :title="msg | toup">
     	鼠标长停   
    </p>
</template>
<script>
	filters:{
        toUp(val){
            return val.toUpperCase()
        }
    }
</script>

注意

过滤器可以使用多个，多个过滤器传值问题

<p>{{ strs | toUp |tobreak('|','-')}}</p>
filters: {
    tobreak(val, syn,test) {
      return val.split("").reverse().join(syn+test)
    },
},

除管道传的默认值外，其它值的传递和函数相似

• 过滤器替换案例1时间模块

计算属性

<template>
	<p>
        {{num}}
    </p>
</template>
<script>
	data:{
        return {
            a:10,
            b:20
        }
    }
	computed:{
        num(){
            return this.a + this.b
        }
    }
</script>

特性

带缓存，计算属性对应函数执行后，会把return值缓存起来

依赖项不变，多次调用都是从缓存取值

当依赖值变化时，函数会自动重新执行，并刷新缓存的值

• 更新案例的统计价和平均价（reduce、toFixed）

计算属性双向绑定

需要将计算属性的完整写法给计算属性赋值

computed:{
	full:{
		set(val){},
		get(){
			return val,
		}
	}
}

案例2_全选框

• 小框影响大框
• 大框影响小框
• 反选选项

侦听器

可以侦听 data、computed 属性值的改变

语法

watch:{
	变量名(newVal,oldVal){
		//处理函数
	}
}

深度监听(监听对象)

watch:{
	对象名:{
		handler(newVal,oldVal){
			//处理函数
		},
		deep:true, //监听对象值的改变
		immediate:true,//立刻监听，在打开页面时执行一次处理函数
	}
}

• 添加本地值，使用监听器

根据以上知识点更新案例1