本篇来简单了解 vue 的数据, 方法, 计算属性和监听器等相关内容.
data ( )
vue 里面的 data ( ) 函数返回一些能供模板 template 直接使用的数据, 以变量的方式进行 return 出去.
<!DOCTYPE html>
<html lang="en">
<head>
<title> data () </title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="root"></div>
<script>
const app = Vue.createApp({
data () {
return {
message: 'hello, world',
show: false
}
},
template: `<div>{{message}}</div>`
})
const vm = app.mount('#root')
</script>
</body>
</html>
要改变 message 的值, 只需要通过:
vm.$data.message = 'youge'
当然如果 data ( ) return 的数据变量只有一层, 则可以更简单地用:
vm.message = 'youge'
methods: { }
里面用来放一些有 dom 元素绑定事件的方法. 值得注意的是这些 方法的 this 都指向了 app 实例.
<!DOCTYPE html>
<html lang="en">
<head>
<title> methods: { } </title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="root"></div>
<script>
const app = Vue.createApp({
data () {
return {
message: 'hello, world'
}
},
methods: {
// 方法的 this 都指向了 app 哦
handleClick () {
console.log('click', 'this的指向是app的$data.message,', this.message)
},
// 传参数也是可以的哈
formatString (str) {
return str.toUpperCase()
}
},
template: `<div @click="handleClick">{{message}} 点我</div>`
})
const vm = app.mount('#root')
</script>
</body>
</html>
在控制台则会输出:
click this的指向是app的$data.message, hello, world
因此在 methods 中, 如果要用到 this 的特性, 是不能用 箭头函数的, 因为箭头函数的 this 指向外层, 即这里 app 的外层, 这样就会一直找到了 window 对象啦. (变量作用域). 所以还是用传统的 "小括号, 花括号" 的方式来写哦. 最后, 既然是方法 (或者函数) 也都是可以传参的.
computed: { }
用来存储一个动态计算的属性值. 先以一个不太优雅的方式来实现一个计算过程, 如果不用 computed 的话:
<!DOCTYPE html>
<html lang="en">
<head>
<title> computed 前世 </title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="root"></div>
<script>
const app = Vue.createApp({
data () {
return {
message: 'hello, world',
count: 8,
price: 5
}
},
template: `<div>总价是: {{ count* price }}</div>`
})
const vm = app.mount('#root')
</script>
</body>
</html>
则会显示: "总价是: 40". 如果为了让这种固定计算的代码变得更加有语义化一些, 则就可以定义一个 语义化的计算属性, 假设名字叫 money. 其是一个动态计算的值, money = count * price.
<!DOCTYPE html>
<html lang="en">
<head>
<title>computed:{ }</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="root"></div>
<script>
const app = Vue.createApp({
data () {
return {
message: 'hello, world',
count: 8,
price: 5
}
},
computed: {
money () {
return this.price * this.count
}
},
template: `<div>总价是: {{ money }}</div>`
})
const vm = app.mount('#root')
</script>
</body>
</html>
假设现在动态去改变 count 的值, 如:
vm.count = 100
则对应的计算属性 money 的值也会自动变为 100 * 5 = 500.
因此 computed 计算属性指的是 "这个属性值" 是由其他几个数据 "计算" 出来的. 当相关数据发生变化时, 其计算属性值也会动态更新. 从个人使用的体验来看, 用计算属性确实会让代码逻辑更加语义化和优雅很多.
最后要能区分的是 computed 和 methods 里面的方法的差异在于:
- computed 只有当依赖的内容发生变化, 才会重新计算
- methods 只要页面重新渲染 (mounted) 就会重新计算
由此可见 computed 会带有一种 "缓存" 的机制, 从而降低页面一渲染就要计算所带来的消耗.
watch: { }
用来监听数据的一些变化等做一些异步的处理. 假设我们要监听上栗的 price 属性, 当其发生变化的时候, 隔3秒进行一些逻辑处理:
<!DOCTYPE html>
<html lang="en">
<head>
<title> watch: {} </title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="root"></div>
<script>
const app = Vue.createApp({
data () {
return {
message: 'hello, world',
count: 8,
price: 5
}
},
watch: {
// 监听 price, 当其发生变化3秒后, 打印一个 "price changed"
price () {
setTimeout(() => {
console.log('price changed')
}, 2000);
}
}
})
const vm = app.mount('#root')
</script>
</body>
</html>
则这里的 watch 对 price 进行了监听. 当 price 的值发生变化时, 则会触发一些异步处理的逻辑哦.
甚至还能监听到该数据前后变化的值, 比如我们要监听 price 的当前值和变化前的值:
<!DOCTYPE html>
<html lang="en">
<head>
<title> methods: { } </title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="root"></div>
<script>
const app = Vue.createApp({
data () {
return {
message: 'hello, world',
count: 8,
price: 5
}
},
watch: {
// 都是形参哈
price (current, prev) {
console.log("price 当前是:", current, "之前是: ", prev)
}
},
const vm = app.mount('#root')
</script>
</body>
</html>
则控制台显示:
price 当前是: 888 之前是: 5
利用这种特性, 不难想到上栗的 computed 来计算 money 也可以用 wath实现:
<!DOCTYPE html>
<html lang="en">
<head>
<title> methods: { } </title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="root"></div>
<script>
const app = Vue.createApp({
data () {
return {
message: 'hello, world',
count: 2,
price: 5,
money: 10
}
},
watch: {
// 当 price 发生变化时, 函数会执行, 都是形参哈
price (current, prev) {
this.money = current * this.count
}
},
template: `<div>总价是: {{ money }}</div>`
})
const vm = app.mount('#root')
</script>
</body>
</html>
最后小结一波吧:
- 本篇整体对 data (), methods: { }, computed: { }, watcher: { } 的基本用户和场景有初步介绍
- computed 和 methds 都能实现的功能, 推荐用 computed, 因为有一定的 "缓存" 机制
- computed 和 watcher 都能实现的功能, 推荐用 computed, 因为写起来更简洁