计算属性

             1 可以直接使用此计算属性：并且获得一个RETRURN的值
             2 计算属性具有缓存的功能 */
             3 当data里面的数据值被改变的时候计算属性缓存的内容才会被刷新 */

<body>
#dom
<div id="vv">
        <p>
            {{gettime}}
        </p>
    </div>  
#vues
    computed:{
                gettime:function(){
                    let y = this.a.getFullYear()
                    let m = this.a.getMonth()<10?("0"+(this.a.getMonth()+1)):this.a.getMonth()
                    let d = this.a.getDate()<10?"0"+this.a.getDate():this.a.getDate()
                    let h = this.a.getHours()<10?"0"+this.a.getHours():this.a.getHours()
                    let min = this.a.getMinutes()<10?"0"+this.a.getMinutes():this.a.getMinutes()
                    let s = this.a.getSeconds()<10?"0"+this.a.getSeconds():this.a.getSeconds()
                    return `${y}-${m}-${d}  ${h}:${min}:${s}`
                }
            },
            mounted(){
                let id=setInterval(() => {
                    this.a=new Date()
                }, 1000);

监听

 1.普通监听:监听的数据为"基本数据类型时"类型


 <div id="app">
        <h1>{{value}}</h1>
        <button @click="changeV">改变value的值</button>
        <button @click="changeV">改变value的值</button>
        <button @click="changeV">改变value的值</button>
        <h1>原价：{{price}}</h1>
        <button @click="changePrice">改变价格</button>
        <h1>相比原价贵了{{expensive}}</h1>


        <h1>原价{{yuanjia}}</h1>
        <h1>现价{{xianjia}}</h1>
        <button @click="add">增加价格</button>
        
        <h1 v-model="vvalue">相比原价提高了{{vvalue}}</h1>
    </div>
 
 new Vue({
            el: "#app",
            data: {
                value:100,
                price:100,
                expensive:0,
                rePrice:100,
                xianjia:100,
                yuanjia:100,
                vvalue:""
            },
            /* 监听器 */
            /* 只要data中的值被改变了就会被触发 */
            watch:{
                xianjia:function(hou,qian){
                    console.log(this);
                    this.vvalue=hou-this.yuanjia
                },
                /* value属性需要和data中的属性相对应 */
                value:function(newV,oldV){
                    /* 第一个参数newV表示最新的值 第二个参数oldV表示之前的值 */
                    console.log('value的值被改变了',a,b)
                },
                /* 有个价格price 原价是100  点击一个按钮 价格加10 会在页面显示出 相比原价贵了多少 */
                price:function(newV,oldV){
                    this.expensive = newV - this.rePrice
                }
            },
            methods: {
                changePrice:function(){
                    this.price+=10;
                },
                changeV(){
                    this.value++;
                },
                add:function(){
                    this.xianjia+=10
                }
                
            },
        })

 2.深度监听：监听的数据为“引用数据”类型   

        /* 引用数据类型使用简写的方式无效 怎么办？改用对象的方式 加deep:true深度监听 */
        /* handler方法名是固定的不可以被篡改 */
        /* immediate:true 会立即执行监听器里面的handler方法 */

    new Vue({
           el: "#app",
           data: {
               obj:{
                   value:0
               },
               car:{
                   price:100
               },
           },
           watch:{
                obj:{
                    deep:true,
                    handler:function(newV,oldV){
                        console.log(newV,oldV)
                        console.log('值被改了')
                    },
                   // 立即执行
                    immediate:true
                },
               'obj.value':function(){
                   console.log('简单粗暴的方式监听对象里面的值')
               },

生命周期

            beforeCreate() {
                /* 实例化对象创建之前是获取不到data里面的数据的 */
                console.log('beforeCreate',this.msg)
            },
            /* Vue实例化对象创建之后 */
            created() {
                /* 实例化对象创建之后可以获取data里面的数据 */
                /* 实例化对象创建之后不可以获取到dom包括根节点 */
                console.log('created',this.msg,'el',this.$el)
                /* ★一般在created里面调用接口把接口里面的数据赋值给到Vue的data中 */
                this.timeId = setInterval(()=>{
                    this.time++;
                    console.log(this.time)
                },500)
            },
            /* Vue的dom挂载之前 */
            beforeMount() {
                /* dom挂载之前可以获取到根节点 */
                /* beforeMount还没有把data中的数据渲染到dom节点上 */
                console.log('beforeMount',this.$el)
            },
            /* Vue的dom挂载之后 */
            mounted() {
                /* mounted已经把data中的数据渲染到了dom节点上 */
                console.log('mounted',this.$el)
                /* ★一般在获取dom节点操作要放在mounted中执行，例如echarts中获取根元素 */
            },
            /* Vue的data值更新前 */
            /* 当我把Vue实例中的data中的值改变了会触发beforeUpdate和updated *//
            beforeUpdate() {
                console.log('beforeUpdate',this.msg,this.$el)
            },
            /* Vue的data值更新后 */
            updated() {
                console.log('updated',this.msg,this.$el)
            },
            /* Vue组件销毁前 */
            /* 在调用$destroy()方法的时候 会执行下面的两个钩子函数 */
            /* ★beforeDestroy和destroyed的一个使用场景是在销毁定时器节约内存的时候都可以使用 */
            beforeDestroy() {
                console.log('beforeDestroy',this.msg,this.$el)
            },
            /* Vue组件销毁后 */
            destroyed() {
                console.log('destroyed',this.msg,this.$el)
                clearInterval(this.timeId)
            },

VUE计算属性+监听+生命函数

计算属性