html网站开发例子,东莞网站制作哪家最便宜,措美网站建设,成全视频免费观看在线看1000集目录 一、基本使用1.1 在computed中定义1.1.1 案例1.1.2 控制台调用getter1.1.3 控制台中的data和computed 1.2 缓存效果1.3 完整写法1.3.1 案例1.3.2 效果图 1.4 简写形式 二、案例的其他实现2.1 methods实现2.2 插值语法实现 三、体会计算属性的好处3.1 复杂任务时3.2 使用计… 目录 一、基本使用1.1 在computed中定义1.1.1 案例1.1.2 控制台调用getter1.1.3 控制台中的data和computed 1.2 缓存效果1.3 完整写法1.3.1 案例1.3.2 效果图 1.4 简写形式 二、案例的其他实现2.1 methods实现2.2 插值语法实现 三、体会计算属性的好处3.1 复杂任务时3.2 使用计算属性3.3 computed vs methods 四、计算属性汇总 计算属性关键词: computed。计算属性在处理一些复杂逻辑时是很有用的。 一、基本使用 1.1 在computed中定义
下面案例在computed中定义了一个计算属性名为fullName其所依赖的属性为firstName 和 lastName。
并且定义了getter,如果getter被调用会打印出get被调用了!
1.1.1 案例
div idrootdiv classrow姓input typetext v-modelfirstName/divdiv classrow名input typetext v-modellastName/div
/div
scriptconst vm new Vue({el:#root,data:{firstName: 小,lastName: 三},computed:{fullName:{get() {console.log(get被调用了!);// console.log(this);return this.firstName-this.lastName}}}});/script1.1.2 控制台调用getter
打开控制台输入vm 回车会发现计算属性fullName已经在vm实例上了。并且会发现此时该属性的值看不到有三个点...点击才能看到也就是getter被调用了。 1.1.3 控制台中的data和computed
打开控制台我们可以很方便的看到data和computed的属性 1.2 缓存效果
下面案例中get只会被调用一次其余的会从缓存中读取。控制台只会打印出一次get被调用了!
div idrootdiv classrow姓input typetext v-modelfirstName/divdiv classrow名input typetext v-modellastName/divdiv classrow全名span{{fullName}}/span/divdiv classrow全名span{{fullName}}/span/divdiv classrow全名span{{fullName}}/span/divdiv classrow全名span{{fullName}}/span/div
/div
scriptconst vm new Vue({el:#root,data:{firstName: 小,lastName: 三},computed:{fullName:{get() {console.log(get被调用了!);// console.log(this);return this.firstName-this.lastName}}}});/script1.3 完整写法
增加了setter的定义通过控制台修改计算属性fullName此时会看到setter被调用了并修改了所依赖的属性firstName和lastName 。对于Vue来讲data中的任何一个数据发生变化的时候Vue的模板都会重新解析一遍。因此由于这两个属性发生了变化其对应getter就会被调用。
1.3.1 案例
div idrootdiv classrow姓input typetext v-modelfirstName/divdiv classrow名input typetext v-modellastName/divdiv classrow全名span{{fullName}}/span/divdiv classrow全名span{{fullName}}/span/divdiv classrow全名span{{fullName}}/span/divdiv classrow全名span{{fullName}}/span/div
/div
scriptconst vm new Vue({el:#root,data:{firstName: 小,lastName: 三},computed:{fullName:{get() {console.log(get被调用了!);// console.log(this);return this.firstName-this.lastName},set(value) {console.log(set,value);const arr value.split(-);this.firstName arr[0];this.lastName arr[1];}}}});
/script1.3.2 效果图
我们在控制台中输入vm.fullName李-四 回车就会看到如下效果。 1.4 简写形式
计算属性 一般不做修改。如果只读不改计算属性就可以写成简写的形式。这时不再是一个对象了而是用函数代替且就为get函数。
div idrootdiv classrow姓input typetext v-modelfirstName/divdiv classrow名input typetext v-modellastName/divdiv classrow全名span{{fullName}}/span/div
/divscriptconst vm new Vue({el:#root,data:{firstName: 小,lastName: 三},computed:{fullName() {console.log(get被调用了!);return this.firstName-this.lastName}}});
/script二、案例的其他实现 2.1 methods实现
在methods中定义了fullName函数来实现
div idrootdiv classrow姓input typetext v-modelfirstName/divdiv classrow名input typetext v-modellastName/divdiv classrow全名span{{fullName()}}/span/div
/divscriptconst vm new Vue({el:#root,data() {// data中的任何一个数据发生变化的时候Vue的模板都会重新解析一遍return {firstName: 小,lastName: 三};},methods:{fullName(){// this就是vm实例// console.log(this);console.log(fullName函数被调用了);return this.firstName-this.lastName;}}});
/script2.2 插值语法实现
通过直接在Vue模板里拼接来实现
div idrootdiv classrow姓input typetext v-modelfirstName/divdiv classrow名input typetext v-modellastName/divdiv classrow全名span{{firstName}}-{{lastName}}/span/div
/divscriptconst vm new Vue({el:#root,data() {return {firstName: 小,lastName: 三};},});
/script三、体会计算属性的好处 3.1 复杂任务时
如下代码是反转字符串的例子这个时候模板变的很复杂不容易看懂和理解。
div idapp{{ message.split().reverse().join() }}
/div3.2 使用计算属性
对于上述问题我们使用计算属性来解决。
div idappp原始字符串: {{ message }}/pp计算后反转字符串: {{ reversedMessage }}/p
/divscript
var vm new Vue({el: #app,data: {message: Runoob!},computed: {// 计算属性的 getterreversedMessage: function () {// this 指向 vm 实例return this.message.split().reverse().join()}}
})
/script3.3 computed vs methods
我们可以使用 methods 来替代 computed效果上两个都是一样的但是 computed 是基于它的依赖缓存只有相关依赖发生改变时才会重新取值。而使用 methods 在重新渲染的时候函数总会重新调用执行。
可以说使用 computed 性能会更好但是如果你不希望缓存你可以使用 methods 属性。
methods: {reversedMessage2: function () {return this.message.split().reverse().join()}
}四、计算属性汇总 概念所谓计算属性就是要用的属性不存在要通过已有的属性加工、计算生成一个全新的属性。对于Vue来说data中配置的就是属性。计算属性与data中定义的属性分开。原理底层借助了Object.defineProperty()方法提供的getter和setter。get函数的作用 a. 当有程序读取计算属性时get就会被调用且返回值就作为计算属性的值。即计算属性是实时计算的属性。 b. Vue做了缓存当所依赖的数据没有发生变化读取的时候会从缓存中取值。不会调用get c. Vue已经将get中this维护好了就是vm实例get函数什么时候执行 a. 初次读取时会执行一次 b. 当依赖的数据发生变化时会被再次调用set函数什么时候调用 a. 当计算属性被修改时被调用优势与methods实现相比内部有缓存机制效率更高调试方便。注意点 a. 计算属性最终会出现在vm上直接读取使用即可。 b. 如果计算属性要被修改那必须写set函数去响应修改且set中要引起计算时依赖的数据发生改变。 c. 计算属性一般不做修改。这个时候只读不改可以有简写的形式不再是一个对象了而是用函数代替且就为get函数。
