计算属性
<script>
export default{
data(){
return{
test57: '57-6666',
test56: 56
}
},
computed:{ //计算属性 ,只要依赖值不变就不会重新计算。
reverseMsg:function (){
console.log("计算属性")
return this.test57.split('').reverse().join('')
}
},
methods:{
reverseMessage:function (){
console.log("methods")
return this.test57.split('').reverse().join('')
}
},
};
</script>
<template>
<div>
<p>{{test57}}</p>
<p>{{test57.split('').reverse().join('')}}</p>
<p>{{test57.split('').reverse().join('')}}</p>
<p>{{test57.split('').reverse().join('')}}</p>
<p>----下方为计算属性---</p>
<!-- 连()都不需要加-->
<p>{{reverseMsg}}</p>
<p>{{reverseMsg}}</p>
<p>{{reverseMsg}}</p>
<p>----下方为methods----</p>
<p>{{reverseMessage()}}</p>
<p>{{reverseMessage()}}</p>
<p>{{reverseMessage()}}</p>
</div>
</template>
<style>
#d1{
color: red;
}
#d2{
color: blue;
}
.d1{
font-size: 50px;
}
</style>

computed只执行1次(只要依赖值不变,就不会重新计算而冲缓存中获取)
methods执行3次
计算属性修改原始值
<script>
export default{
data(){
return{
test57: '57-6666',
test56: 56
}
},
computed:{ //计算属性 ,只要依赖值不变就不会重新计算。
reverseMsg:function (){
console.log("计算属性")
return this.test57.split('').reverse().join('')
}
},
methods:{
reverseMessage:function (){
console.log("methods")
return this.test57.split('').reverse().join('')
}
},
};
</script>
<template>
<div>
<p>{{test57}}</p>
<p>{{test57.split('').reverse().join('')}}</p>
<p>{{test57.split('').reverse().join('')}}</p>
<p>{{test57.split('').reverse().join('')}}</p>
<p>----下方为计算属性---</p>
<!-- 连()都不需要加-->
<p>{{reverseMsg}}</p>
<p>{{reverseMsg}}</p>
<p>{{reverseMsg}}</p>
<p>----下方为methods----</p>
<p>{{reverseMessage()}}</p>
<p>{{reverseMessage()}}</p>
<p>{{reverseMessage()}}</p>
<button @click="test57='hellokugou'">改变test57</button>
</div>
</template>
<style>
#d1{
color: red;
}
#d2{
color: blue;
}
.d1{
font-size: 50px;
}
</style>


computed 会比 methods 提高了性能
计算属性 Setter
<script>
export default{
data(){
return{
test57: '57-6666',
test56: 56
}
},
computed:{ //计算属性 ,只要依赖值不变就不会重新计算。
// reverseMsg:function (){
// console.log("计算属性")
// return this.test57.split('').reverse().join('')
// }
reverseMsg:{ //每一个计算属性中都一个getter,setter,上面为简写,下面为完整版,计算属性为只读属性。
set:function (newValue){ //设置或更改计算属性时使,一般没有set方法
console.log(newValue)
},
get:function (){
return this.test57.split('').reverse().join('')
}
}
},
methods:{
reverseMessage:function (){
console.log("methods")
return this.test57.split('').reverse().join('')
}
},
};
</script>
<template>
<div>
<p>{{test57}}</p>
<p>{{test57.split('').reverse().join('')}}</p>
<p>{{test57.split('').reverse().join('')}}</p>
<p>{{test57.split('').reverse().join('')}}</p>
<p>----下方为计算属性---</p>
<!-- 连()都不需要加-->
<p>{{reverseMsg}}</p>
<p>{{reverseMsg}}</p>
<p>{{reverseMsg}}</p>
<p>----下方为methods----</p>
<p>{{reverseMessage()}}</p>
<p>{{reverseMessage()}}</p>
<p>{{reverseMessage()}}</p>
<button @click="test57='hellokugou'">改变test57</button>
<button @click="reverseMsg='hellokugou'">改变reverseMessage</button>
</div>
</template>
<style>
#d1{
color: red;
}
#d2{
color: blue;
}
.d1{
font-size: 50px;
}
</style>

给setter 赋值
<script>
export default{
data(){
return{
test57: '57-6666',
test56: 56
}
},
computed:{ //计算属性 ,只要依赖值不变就不会重新计算。
// reverseMsg:function (){
// console.log("计算属性")
// return this.test57.split('').reverse().join('')
// }
reverseMsg:{ //每一个计算属性中都一个getter,setter,上面为简写,下面为完整版,计算属性为只读属性。
set:function (newValue){ //设置或更改计算属性时使,一般没有set方法
console.log(newValue);
this.test57=newValue
},
get:function (){
return this.test57.split('').reverse().join('')
}
}
},
methods:{
reverseMessage:function (){
console.log("methods")
return this.test57.split('').reverse().join('')
}
},
};
</script>
<template>
<div>
<p>{{test57}}</p>
<p>{{test57.split('').reverse().join('')}}</p>
<p>{{test57.split('').reverse().join('')}}</p>
<p>{{test57.split('').reverse().join('')}}</p>
<p>----下方为计算属性---</p>
<!-- 连()都不需要加-->
<p>{{reverseMsg}}</p>
<p>{{reverseMsg}}</p>
<p>{{reverseMsg}}</p>
<p>----下方为methods----</p>
<p>{{reverseMessage()}}</p>
<p>{{reverseMessage()}}</p>
<p>{{reverseMessage()}}</p>
<button @click="test57='hellokugou'">改变test57</button>
<button @click="reverseMsg='你好酷狗'">改变reverseMessage</button>
</div>
</template>
<style>
#d1{
color: red;
}
#d2{
color: blue;
}
.d1{
font-size: 50px;
}
</style>

监听器
虽然计算属性在大多数情况下更合适,但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法,来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的。
<script>
export default{
data(){
return{
test57: '57-6666',
test56: 56
}
},
computed:{
},
methods:{
},
watch:{//监听数据变化
test57:function (newValue,oldValue){//值的变量名可以自定义
console.log(newValue);
console.log(oldValue);
//此处可以搞一些异步操作等
}
},
};
</script>
<template>
<div>
<p>{{test57}}</p>
<button @click="test57='你好kugou'">改变test57</button>
</div>
</template>
<style>
</style>

监听器 双向绑定实例
<script>
export default{
data(){
return{
test57: '57-6666',
test56: 56
}
},
computed:{
},
methods:{
},
watch:{//监听数据变化
test57:function (newValue,oldValue){
console.log(newValue);
console.log(oldValue);
//此处可以搞一些异步操作等
if(newValue.length <5 || newValue.length>10){
console.log("输入框 str not <5 or >10")
}
}
},
};
</script>
<template>
<div>
<p>{{test57}}</p>
<button @click="test57='你好kugou'">改变test57</button>
<!-- v-model:数据都双向绑定-->
<input type="text" v-model="test57">
</div>
</template>
<style>
#d1{
color: red;
}
#d2{
color: blue;
}
.d1{
font-size: 50px;
}
</style>

watch 属性 immediate
<script>
export default {
data() {
return {
test57: '57',
test56: 56
}
},
computed: {},
methods: {},
watch: {//监听数据变化
// test57:function (newValue,oldValue){
// console.log(newValue);
// console.log(oldValue);
// //此处可以搞一些异步操作等
// if(newValue.length <5 || newValue.length>10){
// console.log("输入框 str not <5 or >10")
// }
// }
test57: {
immediate: true,
handler: function (newValue) {
console.log(newValue)
if (newValue.length < 5 || newValue.length > 10) {
console.log("输入框 str not <5 or >10")
}
},
},
},
};
</script>
<template>
<div>
<p>{{ test57 }}</p>
<button @click="test57='你好kugou'">改变test57</button>
<!-- v-model:数据都双向绑定-->
<input type="text" v-model="test57">
</div>
</template>
<style>
#d1 {
color: red;
}
#d2 {
color: blue;
}
.d1 {
font-size: 50px;
}
</style>

watch对 对象进行监听
<script>
export default {
data() {
return {
test57: '57',
test56: 56,
user: {
name: 'kugou'
}
};
},
computed: {},
methods: {},
watch: {//监听数据变化
// test57:function (newValue,oldValue){
// console.log(newValue);
// console.log(oldValue);
// //此处可以搞一些异步操作等
// if(newValue.length <5 || newValue.length>10){
// console.log("输入框 str not <5 or >10")
// }
// }
test57: {
immediate: true,
handler: function (newValue) {
console.log(newValue)
if (newValue.length < 5 || newValue.length > 10) {
console.log("输入框 str not <5 or >10")
}
},
},
//监听不到对象都属性变化,所以需要深度监听
// user:function (newValue){
// console.log(newValue);
//
// },
// user:{
// handler:function (newVale){
// console.log(newVale);
// },
// deep:true,//深度监听,监听器会一层层向下监听,给每一个对象都加上监听器
// }
"user.name":{//使用字符串的监听,只会侦听你想要的
handler:function (newVale){
console.log(newVale);
},
deep:true,//深度监听
}
},
};
</script>
<template>
<div>
<p>{{ test57 }}</p>
<button @click="test57='你好kugou'">改变test57</button>
<!-- v-model:数据都双向绑定-->
<input type="text" v-model="test57">
<p>{{user.name}}</p>
<button @click="user.name='sir'">changename</button>
</div>
</template>
<style>
#d1 {
color: red;
}
#d2 {
color: blue;
}
.d1 {
font-size: 50px;
}
</style>


**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。