vue.js生命周期

时间  2019-12-08
标签 vue.js vue 生命周期 栏目 JavaScript 繁體版
原文   原文链接

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>
复制代码



2、 计算属性

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>
复制代码

3、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>复制代码
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程