vue基础——计算属性、侦听器

最新推荐文章于 2024-09-12 15:10:57 发布

yzbyf

最新推荐文章于 2024-09-12 15:10:57 发布

阅读量368

点赞数 8

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/yzbyf/article/details/134631645

版权

计算属性

<script type="module">
import {createApp} from './js/vue.esm-browser.js';
let app=createApp({
 data(){
  return{}
 }，
 methods:{
 },
 //设置计算属性
 computed:{
 }

每一个计算属性，实质上都包含 get和set两个方法，默认是get方法
在计算属性的get方法中，不要异步请求数据(ajax)或者操作dom
给计算属性设置值的时候，执行的是 set方法
从计算属性获取值的时候，执行的是 get方法

计算属性的优点：
1.数据没有发生变化的时候，优先读取缓存在 computed 中，经过逻辑运算操作的数据，把数据渲染在dom树中，并且不用考虑 methods和watch中数据的变化计算属性值会基于其响应式依赖被缓存
2.它有get方法和set方法，可以进行灵活设置
get 在获取的时候被触发，如果没有set，则默认是get
set 在数据设置的时候被触发

侦听器

书写侦听器的方法，方法名就是侦听器侦听data数据中数据的属性名，该方法具有两个参数：
第一个参数是数据当前的值(新值)
第二个参数是数据变化之前的值(老值)

<body>
    <div id="app"> 
        <p :style="{color:col,fontSize:'30px'}">{{num}}</p>
        <button @click="change">点击++</button><br/>

        <input type="text" v-model="val"> <br/>

        <input type="text" v-model="name">
        <hr/>
        <h1>{{obj.name}}</h1>
        <button @click="changeName">改变name</button>

    </div>
</body>
</html>
<script type="module">
/*
如果需要根据数据的变化来执行操作，可以使用数据侦听器
*/
import {createApp} from './js/vue.esm-browser.js';
let app=createApp({
    data(){
        return{
            col:'#04be02',
            num:100,
            val:'无中生有',
            name:'展昭',
            obj:{
                name:'包拯',
                age:20,
                nickname:'文正'
            }
        }
    },
    methods:{
        rand(m,n){
            return Math.floor(Math.random()*(n-m+1)+m);
        },
        change(){
            this.num+=5;
        },
        changeName(){
            this.obj.name='包青天';
        }
    },
    computed:{

    },
    watch:{
        /*
        书写侦听器的方法，方法名就是侦听器侦听data数据中数据的属性名，该方法具有两个参数，
        第一个参数是 数据当前的值(新值)
        第二个参数是 数据变化之前的值(老值)
        */
        num(newVal,oldVal){
        let r=this.rand(0,255);
        let g=this.rand(0,255);
        let b=this.rand(0,255);
        console.log(newVal,oldVal);
        if(newVal%10==0){
            this.col=`rgb(${r},${g},${b})`;
        }
        },
        val(newVal,oldVal){
            console.log(newVal,oldVal);
        },
        //设置监听器的深度监听
        obj:{
            handler(newVal,oldVal){
            console.log(newVal,oldVal);
        },
        //设置深度监听
        deep:true,
        //设置加载立即监听
        immediate:true
    },
    //监听对象中某一个属性的变化
    //可以通过此方法，直接监听路由对象变化
    'obj.name'(newVal,oldVal){
        console.log('监听name的变化');
        console.log(newVal,oldVal);
    }
    }
}).mount('#app');

//可以设置外部的监听器
app.$watch('name',(newVal,oldVal)=>{
    console.log(newVal,oldVal);
});
</script>