vue.js生命周期

水木青鱼
171 阅读1分钟

一、Vue生命周期

vue实例中从创建到销毁的过程，称之为生命周期，共有八个阶段。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue的生命周期</title>
<script type="text/javascript" src="js/vue.min.js"></script>
<script type="text/javascript">
window.onload = function(){
    new Vue({

        el:'#itany',
        data:{
            msg:'你好啊'
        },
        methods:{
            update(){
                this.msg='欢迎';
            },
            destroy(){
                this.$destroy();
            }
        },
        beforeCreate(){
            alert('组件实例刚刚创建，还未进行数据的观测和事件的配置');
        },
        create(){
            alert('组件实例已经创建完成，并且已经进行数据的观测和事件配置');
        },
        beforeMount(){
            alert('模板编译之前，还没有挂载');
        },
        mounted(){
            alert('模板编译之后，已经挂载,此时才会渲染页面，才能看到页面上数据的展示');
        },
        beforeUpdate(){
            alert('组件数据更新之前');
        },
        updated(){
            alert('组件更新之后');
        },
        beforeDestroy(){
            alert('组件销毁之前');
        },
        destroyed(){
            alert('组件销毁之后');
        }
    })
}
</script>
  </head>
  <body>
<div id="itany">
    {{msg}}
<button @click="update">点击</button>
<button @click="destroy">点击销毁</button>
</div>
</body>
</html>



二、 计算属性

1.基本用法

    计算属性也是用来存储数据的，但是有以下几个特点。
       a.数据可以进行逻辑处理操作的
       b.可以对计算属性中的数据进行监视

2.计算属性 vs 方法

    将计算属性的get函数定义为一个方法也可以实现类似的功能
    区别：
       a.计算属性是基于它的依赖进行更新的，只有在相关依赖发生改变时才能更新变化
        b.计算属性是缓存的，只有相关依赖没有改变，多次访问计算属性得到的值是之前缓存的计算结果，不会多次执行。

3.get和set

    计算属性由两部分组成，get和set,分别用来获取计算属性和设置计算属性；
    默认只有get，如果需要set,要自己添加。
    <!DOCTYPE html>
    <html lang="en">
    <head>
<meta charset="UTF-8">
<title>计算属性</title>
<script type="text/javascript" src="js/vue.min.js"></script>
    </head>
    <body>
<div id="itany">
    {{msg}}
    <br>
    {{msg2}}
    <br>
    <!-- 对数据进行处理再显示 -->
    {{msg.split('').reverse().join('')}}
    <br>
    {{msg3}}
    <br>
    <button @click="changemsg">修改msg值</button>
    <br>
    {{num1}}
    <br>
    num2:
    {{num2}}
    <br>
    {{getnum2()}}

    <br>
    <button onclick="a()">测试</button>
    <br>
    <button @click="change()">修改计算属性</button>
</div>
    </body>
    </html>
     <script type="text/javascript">
    var vm = new Vue({
        el:'#itany',
        data:{
            msg:'weloome to itany',
            num1:7
        },
        computed:{
            msg2:function(){
                return '欢迎来到北京'
            },
            msg3:function(){
                return this.msg.split('').reverse().join('');
            },
            // num2:function(){
            //  console.log(new Date());
            //  return this.num1-1;
            // }
            num2:{
                get:function(){
                    console.log(new Date());
                    return this.num1-1;
                },
                set:function(val){  
                    // console.log('修改值');
                    this.num1 = 1111;
                }
            }
        },
        methods:{
            changemsg(){
                // this.msg = 'i love you';
                this.num1 = 666;
            },
            getnum2(){
                console.log(new Date());
                return this.num1-1;
            },
            change(){
                this.num2=11;
            }
        }
    })
function a(){
    setInterval(function(){
        // console.log(vm.num2);
        console.log(vm.getnum2())
    },1000)
}
</script>

三、vue实例的属性和方法

1.属性

   vm.$el
   vm.$date
   vm.$options

2.方法

  vm.$mount();
  vm.$destroy();
  vm.$nextTick();
  <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="js/vue.min.js"></script>
</head>
<body>
<div id="itany">
    {{msg}}
    <h2 ref="hh">标题：{{name}}</h2>
    <h2 ref="hello">你好1</h2>
    <h2 ref="world">你好2</h2>
</div>

<script type="text/javascript">
// var vm = new Vue({
//  // el:'#itany',
//  // name:'tom',
//  // age:24,
//  // show:function(){
//  //  console.log('show');
//  // },
//  data:{
//      msg:'welcome to itany'
//  }
// })
// 属性
// vm.属性名 获取data中的属性
// console.log(vm.msg);
// vm.$el 获取vue实例关联的选择器
// console.log(vm.$el); 是DOM对象
// vm.$el.style.color='red';
// vm.$data //获取数据对象data
// console.log(vm.$data.msg);
// vm.$options //

// console.log(vm.$options.name);
// console.log(vm.$options.age);
// vm.$options.show();

// vm.$refs  //获取页面中所有添加属性的元素

// console.log(vm.$refs.hello);
// console.log(vm.$refs.world);
// vm.$refs.hello.style.color = 'red';

// 方法
// vm.$mount //手动的挂载vue实例
// vm.$mount('#itany');
var vm = new Vue({
    data:{
        msg:'11',
        name:'tom'
    }
}).$mount('#itany');

// vm.$destroy() 销毁实例的
// vm.$destroy();
// console.log(vm.msg);

//vm.nextTick()  在DOM更新完成之后 再执行回调函数 一般在修改数据之后使用该方法，以便获取更新后的DOM
// 修改数据
vm.name = "222333";
// DOM还没更新完 view实现响应式并不是数据发生改变之后 dom立即变化 需要按照一定的策略进行dom更新
// console.log(vm.$refs.hh.textContent);
// console.log(vm.$refs.hello);
vm.$nextTick(function(){
    // DOM更新完成了 更新完成后 执行此代码
    console.log(vm.$refs.hh.textContent);
})
</script>
</body>
</html>
  vm.$set();
  vm.$delete();
  <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="js/vue.min.js"></script>
</head>
<body>
<div id="itany">
    <button @click="doUpdate">修改属性</button>
    <button @click="doAdd">添加属性</button>
    <button @click="doDelete()">删除属性</button>
    <div>{{user.name}}</div>
    <div>{{user.age}}</div>
</div>
<script type="text/javascript">
var vm = new Vue({
    el:'#itany',
    data:{
        user:{
            id:'1001',
            name:"tom",
            age:'1'
        }
    },
    methods:{
        doUpdate(){
            this.user.name='tom1';
        },
        doAdd(){
            // this.user.age = 25;
            //通过普通方式为对象添加属性时vue无法实时的监视的
            // this.$set(this.user,'age',18);
            //通过vue实例的$set方法为对象添加属性，可以实时的监视
            // Vue.set(this.user,'age',28);
            //全局的写法
            if(this.user.age){
                ++this.user.age;
            }else{
                Vue.set(this.user,'age',46);
            }
            console.log(this.user);
        },
        doDelete(){
            if(this.user.age){
                //delete.this.user.age;//无效
                Vue.delete(this.user,'age');
            }else{

            }
        }
    }
})
</script>
</body>
</html>
  vm.$watch();
  <!DOCTYPE html>
  <html lang="en">
  <head>
<meta charset="UTF-8">
<title>监视数据的变化，使用$watch</title>
<script type="text/javascript" src="js/vue.min.js"></script>
<script type="text/javascript">
window.onload = function(){
    var vm = new Vue({
        el:'#itany',
        data:{
            name:'tom',
            age:'23',
            user:{
                id:'1001',
                name:'uu'
            }
        },
        // 方式2 使用vue实例提供的watch方法
        watch:{
            age:(newVal,oldVal) => {
                    console.log('name被修改了old:'+oldVal);
                    console.log('name被修改了new:'+newVal);
            },
            user:{
                handler:(newVal,oldVal)=>{
                    console.log('user被修改了old:'+oldVal.name);
                    console.log('user被修改了new:'+newVal.name);
                },
                deep:true //深度监视 //当对象的属性发生变化时候 也会监视
            }
        }

    })
    //方式1：使用vue实例提供的$watch()方法
    // vm.$watch('name',function(newVal,oldVal){
    //  console.log('name被修改了old:'+oldVal);
    //  console.log('name被修改了new:'+newVal);
    // })
}
</script>
    </head>
    <body>
<div id="itany">
    <input type="text" name="" v-model="name">
    <h1>{{name}}</h1>
    <br>
    <input type="text" name="" v-model="age">
    <h1>{{age}}</h1>
    <br>
    <input type="text" name="" v-model="user.name">
    {{user.name}}
</div>
  </body>
  </html>


avatar
文章
阅读
粉丝