如何理解vue响应式？
1.html5中的响应式(屏幕尺寸的变化导致样式的变化)
2.数据的响应式(数据的变化导致页面内容的变化)
加入了v-once指令的标签，只编译一次，显示后再也不会改变值，这样可以在某些状况下提高性能。
示例代码：
<template>
<div class="mypage">
<div class="top"><button class="prew" @click="goPrew()">上一页</button><button class="next" @click="goNext()">下一页</button></div>
<div>第{{num}}页</div>
<div>{{msg1}}</div>
<div v-once class="gr">{{msg2}}</div>
<div class="tips">{{msg22}}</div>
<button @click="goHome()">返回第一页</button>
<button @click="changeInfo()">点击我</button>
<div>{{msg3}}</div>
</div>
</template>
<script>
export default {
name: 'mypage',
data () {
return {
msg1: '这个内容是响应式内容, 根据数据的变化导致页面内容发生变化',
msg2: 'v-once里面这个内容只编译一次，显示之后不再具有响应式功能',
msg3: '点击按钮观察页面的变化',
msg22: '',
num: 5
}
},
methods: {
goHome () {
this.$router.push('/')
},
goPrew () {
this.$router.go(-1)
},
goNext () {
this.$router.push('/vmodel')
},
changeInfo () {
this.msg1 += '我变了吧'
this.msg2 = '其实我是上面一格要变化的内容，但我有v-once指令，所以你应该看不到我吧，那么我就显示到下面一格，因为我自己不能变，我让我大哥显示我给你看。'
this.msg22 = this.msg2
}
}
}
</script>
<style scoped>
.tips{color:red;}
.gr{color:green}
</style>
