<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model='firstName'>
<input type="text" v-model='lastName'>
<!-- 插值表达式的实现 简单的js逻辑表达式 -->
<!-- <span>{{firstName +'-'+ lastName}}</span> -->
<!-- <span>{{firstName}} - {{lastName}} </span> -->
<!-- 更复杂的通过方法的实现
methods中的方法调用一次就会执行一次 如果数据不需要更新
会造成性能的浪费-->
<!-- <span>{{fullName()}} </span>
<span>{{fullName()}} </span>
<span>{{fullName()}} </span>
<span>{{fullName()}} </span>
<span>{{fullName()}} </span> -->
<!-- <span>{{fullName}}</span>
<span>{{fullName}}</span>
<span>{{fullName}}</span>
<span>{{fullName}}</span> -->
<span>{{fullName}}</span>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
// 定义到data中的数据默认会被响应式监听
firstName: '张',
lastName: '三'
},
methods: {
// fullName() {
// console.log(111);
// return this.firstName + '-' + this.lastName
// }
},
// 计算属性computed: 计算属性的值本身不存在 是需要通过计算得到的
// 底层也是通过object.defineProperty来实现的
// computed 与 methods的区别
// 1、是否存在缓存: methods调用一次执行一次
// computed第一次调用时会将结果缓存 (有缓存)、后续调用在所依赖的数据不发生变化的前提下 直接返回缓存的结果 => 复用率高 提升性能
// 2、调用方式不同: methods使用时，一般情况需要加括号，而computed则不需要
// 3、绑定方式不同: methods是单向数据绑定 只有getter, computed是双向数据绑定, 有setter和getter
// 使用场景
// 某个属性的值需要来自多个属性的简单计算或者复杂逻辑计算得出的值时, 推荐使用computed属性, 比如购物车的总价计算
computed: {
// 完整写法
fullName: {
// get作用: 当使用到fullName的时候 默认会调用get方法
// get特点:
// 1、初次使用计算属性的时候会执行
// 2、当依赖的响应式数据发生变化的时候会执行
get() {
console.log(111);
return this.firstName + '-' + this.lastName
},
// 如果需要修改计算属性 需要提供一个set方法
// 并且这个set方法中要能够引起依赖的数据的变化
set(val) {
let arr = val.split('-')
this.firstName = arr[0]
this.lastName = arr[1]
}
},
// 简写
// fullName(){
// return this.firstName + '-' + this.lastName
// }
}
});
</script>
</body>
</html>
1223
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
