VUE (计算属性)

计算属性:computed + watch + methods

computed: {

xxx : function(){
    return 表达式
}

}

computed:基于缓存,检测data数据是否改变
当数据没有改变时,多次调动该函数,但函数不会执行

表达式中调用this.data中的属性,当data数据改变,(函数才会执行)表达式会重新计算,并返回。

但是在methods中
methods:{

xxx : function () {
    return 表达式
}

}
多次调用,xxx会被执行多次,不管data数据是否改变,但是发现表达式的返回结果一样,DOM也不会重新渲染

watch: {

title() {
    
}

}

零、computed watch methods的使用场景
computed:
--当依赖某些状态(state)产生新值的时候,优先选择使用computed:

watch:
--用来解决beforeUpdate,updated,两个钩子里修改状态导致死循环的问题,采用watch
--监测可能异步改变值的时候

methods:
--定义事件响应函数
--定义组件公共处理函数

一、computed 和 methods 的区别
1、相同点
如果作为模板的数据显示,二者都能实现相应的功能,唯一不同的是methods定义的方法需要执行。
2、不同点
-- computed 会基于响应数据缓存,methods不会缓存(但是在绚烂DOM时会判断DOM是否改变,改变时才会重新渲染DOM)
-- diff之前先看data里的数据是否发生变化,如果没有变化computed的方法不会执行,但methods里的方法会执行

二、watch vs computed
1、相同点
如果作为信息展示,二者可以实现相同的功能。不同点是watch可能需要监听更过的属性。在这个时候我们优先使用computed
2、不同点
-- 当想在更新data数据后再次更新数据的时候,不能使用updated生命周期钩子。建议使用watch来监听data数据的变化
-- 使用 watch 选项允许我们执行异步操作 (访问一个 API),限制我们执行该操作的频率,并在我们得到最终结果前,设置中间状态。这些都是计算属性无法做到的。

三、如何使模板重新渲染
1、只要改变data里的数据就会可能触发模板渲染
2、如果经过diff算法比较后,发现更新前后更新后的虚拟DOM相同,就不会渲染模板

Class与Style绑定

v-bind:xxx="表达式结果类型:可以是字符串,可以是对象,还可以是数组"
v-bind:class="[]"
v-bind:style="xxx"
v-bind:class="{}" 对象且可以深拷贝

兼容性
1.自动添加前缀:当 v-bind:style 使用需要添加浏览器引擎前缀的 CSS 属性时,如 transform,Vue.js 会自动侦测并添加相应的前缀。
2.多重值:从 2.3.0 起你可以为 style 绑定中的属性提供一个包含多个值的数组,常用于提供多个带前缀的值,

条件渲染

v-if 和 v-else 中间不能有元素(切记)
v-else-if
<template>包裹条件的模板标签,条件写在template上,但渲染后不会有该标签</template>
:key 相同标签的独立性
注意,<label> 元素仍然会被高效地复用,因为它们没有添加 key 属性。
v-show(boolean) -- 判断,显示隐藏

v-for同时和v-if存在同标签判断中!v-for优先!
当它们处于同一节点,v-for 的优先级比 v-if 更高,这意味着 v-if 将分别重复运行于每个 v-for 循环中。当你只想为部分项渲染节点时,这种优先级的机制会十分有用,

v-for="(item,index) of/in 数组/对象"
v-for可以接收三个参数,value,key,index

v-if 和 v-show 的区别
DOM是真正否渲染!DOM是否隐藏,一定会渲染!

数组
变异方法:可以改变原数组的方法

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

替换数组:不会改变原数组,而是返回一个新数组

filter()
concat()
slice()

注意:
由于 JavaScript 的限制,Vue 不能检测以下数组的变动:

1. 

当你利用索引直接设置一个数组项时,例如:vm.items[indexOfItem] = newValue

2. 

当你修改数组的长度时,例如:vm.items.length = newLength

目前2.0版本为了解决这个问题:使用set
vm.$set(监听操作)
Vue.set(监听操作)

vue2.0使用definpropty监测对象,
对数组下标可以操作,但不会响应
vue3.0即将使用es6的监听方法,解决响应问题

事件处理

v-on:事件="xxx(yy)"注意可以传参

表单
v-model: 可以使用在<input><textarea><select>元素上创建双向数据绑定,在select中的option没有value时,默认为html中的内容

多行文本:
在文本区域插值 (<textarea>{{text}}</textarea>) 并不会生效,应用 v-model 来代替。

如果 v-model 表达式的初始值未能匹配任何选项,<select> 元素将被渲染为“未选中”状态。在 iOS 中,这会使用户无法选择第一个选项。因为这样的情况下,iOS 不会触发 change 事件。因此,更推荐像上面这样提供一个值为空的禁用选项。

<!-- 在“change”时而非“input”时更新 --> <input v-model.lazy="msg" >

.number

.trim 去除首尾空白字符

事件修饰符
.stop -- 阻止单机事件继续传播
.prevent -- 提交事件不在重载加载页面
.capture -- 添加事件监听器时使用事件捕获模式,即元素自身触发的事件先在此处理,然后才交由内部元素进行处理
.self -- 必须在绑定元素上
.once -- 执行一次
.passive -- 取消默认事件

注意事件修饰符可以多个使用,但需要注意执行顺序

.exact 精准控制组合触发事件

Rxjs:定义对象是否可观察

Last modification:July 24th, 2019 at 11:11 pm
如果和我讨论问题,请加好友qq/wx