和阿牛一起冲Vue
文章目录
- 和阿牛一起冲Vue
- 前言
- 姓名案例-插值语法
- 姓名案例_menthods方法
- 姓名案例-计算属性
- 简写方式：
- 总结
- 计算属性：
- 附加
- 监视属性
- 延迟输出
- computed和watch之间的区别：
前言
青春，因为奋斗与奉献更美丽。
姓名案例-插值语法
直接调用属性值数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>姓名案例</title>
</head>
<body>
<div id="root">
姓:<input type="text" v-model:value="firstName"><br />
名:<input type="text" v-model="lastName"><br />
姓名: <span>{{firstName.slice(0,3)}}-{{lastName}}</span>
</div>
</body>
<script src='vue.js'></script>
<script>.config.productionTip = false;
new Vue({
el: '#root',
data: {
name: 'jack',
message: {
url: 'javascript:void(0)?spm=1000.2115.3001.5343',
name: '勇敢牛牛'
},
firstName: '牛',
lastName: '哥',
}
});</script>
</html>
姓名案例_menthods方法
将属性值加以函数话调用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>姓名案例</title>
</head>
<body>
<div id="root">
姓:<input type="text" v-model:value="firstName"><br />
名:<input type="text" v-model="lastName"><br />
姓名: <span>{{fullName()}}</span>
</div>
</body>
<script src='vue.js'></script>
<script>.config.productionTip = false;
new Vue({
el: '#root',
data: {
name: 'jack',
message: {
url: 'javascript:void(0)?spm=1000.2115.3001.5343',
name: '勇敢牛牛'
},
firstName: '牛',
lastName: '哥'
},
methods: {
fullName() {
return this.firstName + '-' + this.lastName;
}
}
});</script>
</html>
姓名案例-计算属性
通过computed计算属性（缓存优化）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>姓名案例-计算属性</title>
</head>
<body>
<div id="root">
姓:<input type="text" v-model:value="firstName"><br />
名:<input type="text" v-model="lastName"><br />
姓名: <span>{{fullName}}</span>
</div>
</body>
<script src='vue.js'></script>
<script>.config.productionTip = false;
new Vue({
el: '#root',
data: {
name: 'jack',
message: {
url: 'javascript:void(0)?spm=1000.2115.3001.5343',
name: '勇敢牛牛'
},
firstName: '牛',
lastName: '哥'
},
computed: {
fullName: {
// 当有人读取fullname了，get就会被调用，且返回值作为fullname的值
// get : 初次使用+所依赖的数据发生变换
get() {
return this.firstName + '-' + this.lastName;
},
// 当fullname修改时
set(value) {
console.log('全名被修改');
const arr = value.split('-');
this.firstName = arr[0];
this.lastName = arr[1];
}
}
}
});</script>
</html>
简写方式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>姓名案例-计算属性</title>
</head>
<body>
<div id="root">
姓:<input type="text" v-model:value="firstName"><br />
名:<input type="text" v-model="lastName"><br />
姓名: <span>{{fullName}}</span>
</div>
</body>
<script src='vue.js'></script>
<script>.config.productionTip = false;
new Vue({
el: '#root',
data: {
name: 'jack',
message: {
url: 'javascript:void(0)?spm=1000.2115.3001.5343',
name: '勇敢牛牛'
},
firstName: '牛',
lastName: '哥'
},
computed: {
fullName: function () {
return this.firstName + '-' + this.lastName;
}
}
});</script>
</html>
总结
计算属性：
1.定义：要用的属性不存在，要通过已有属性计算得来。
2.原理：底层借助了Objcet.defineproperty方法提供的getter和setter。
3.get函数什么时候执行？
- 初次读取时会执行一次。
- 当依赖的数据发生改变时会被再次调用。
4.优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。
备注：
1.计算属性最终会出现在vm上，直接读取使用即可。
2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改
附加
监视属性
: {
firstName(newValue) {
this.fullName = newValue + '-' + this.lastName;
},
lastName(newValue) {
this.fullName = this.firstName + '-' + newValue;
}
}延迟输出
watch: {
firstName(newValue) {
setTimeout(() => {
this.fullName = newValue + '-' + this.lastName;
}, 1000)
}
}
注意计算属性和函数属性里面不能开启异步任务，并且这个setTimeout必须是箭头函数，因为此处的定时器不是vue调用的。而是js引擎帮助。
computed和watch之间的区别：
1.computed能完成的功能，watch都可以完成。
2.watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。
两个重要的小原则：
1.所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或 组件实例对象。
2.所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数，
这样this的指向才是vm 或 组件实例对象。
