1.v-once指令:只能执行一次性地插值,当数据改变时,插值处的内容不会更新。
例:
<template>
<div>
<h1>{{num}}</h1> <!-- 点击后一直在改变 -->
<h1 v-once>{{num}}</h1> <!-- 点击后一直在不变,值为初试赋值1 -->
<button @click="changeNum">改变msg</button>
</div>
</template>
<script>
export default {
data() {
return {
num: 1
}
},
methods: {
changeNum () {
this.num ++
console.log(this.num) //点击后一直在改变
},
}
}
</script>
例:此例子中msg在created中定义了,但是还没被插值,只有在mounted时才进行了插值,所以msg只进行了一次插值操作,插入的值均为 ‘第二次改变值’
<template>
<h1>{{msg}}</h1>
<h1 v-once>{{msg}}</h1>
</template>
<script>
export default {
data() {
return {
msg: '初始值'
}
},
methods: {
changeMsg() {
this.msg = '第一次改变值'
},
againChangeMsg() {
this.msg = '第二次改变值'
console.log(this.msg)
},
},
created() {
changeMsg()
againChangeMsg()
}
}
</script>
2、计算属性
特点:(1) 计算属性不在data中做初始化,因为计算属性默认只有 getter ,不过在需要时也可以自己写一个 setter
例:当 firstname或lastname改变时,getter会被调用,fullname值将会被改变
运行 vm.fullName = 'John Doe'
时,setter 会被调用,vm.firstName
和 vm.lastName
也会相应地被更新。
computed: {
fullName: {
// getter
get: function () {
return this.firstName + ' ' + this.lastName
},
// setter
set: function (newValue) {
var names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
}
(2)计算属性根据响应式依赖(data中声明的变量)的变化而变化,依赖不变,计算属性不会变
例:now不会因为Date.now()的改变而改变
computed: {
now: function () {
return Date.now()
}
}
(3)可以监听到对象内部值的变化
3、侦听属性
特点:(1)属性需在data中初始化
(2)数据跟随其他数据的变化而变化
(3)发现不了对象内部值的变化(除了数组),可添加deep:true开启监听对象内部值的变化,用handel属性控制
<!DOCTYPE html>
<html>
<head>
<title>计算属性和侦听器(watch和computed)</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="app">dgdgdgsdgg</div>
<script>
var App = {
template:`
<div>
<input type="text" v-model="msg">
<input type="text" v-model="list[0].name">
<input type="text" v-model="list[0].age">
</div>
`,
data() {
return {
msg:665,
list:[{name:'John','age':12}]
}
},
watch: {
msg(newVal,oldVal) {
console.log(this.msg);
console.log(newVal); //返回msg未改变前的值
console.log(oldVal); //返回msg改变后的值
},
list() { //在变异 (不是替换) 对象或数组时,旧值将与新值相同,因为它们的引用指向同一个对象/数组。所以这里完全不会被调用到,需要对对象或数组进行深度观察
console.log(this.list[0].name);
console.log(this.list[0].age);
},
//对数组进行深度观察
list: {
deep:true,
handler:function() {
console.log('深度监视成功!!!!');
console.log(this.list);
console.log(this.list[0].name);
console.log(this.list[0].age);
}
}
}
}
new Vue({
el:document.getElementById('app'),
components: {
App
},
template: '<App />'
})
</script>
</body>
</html>
4、不推荐同时使用 v-if
和 v-for
。当 v-if
与 v-for
一起使用时,v-for
具有比 v-if
更高的优先级。
5、prop传值时,如果是非字符串都要用v-bind当前缀。传入一个对象的所有属性,可以使用不带参数的 v-bind
post: {
id: 1,
title: 'My Journey with Vue'
}
<blog-post v-bind="post"></blog-post>
6、按需加载组件
components: {
'my-component': () => import('./my-async-component')
}