vue生命周期以及vue的计算属性
一、Vue生命周期（vue实例从创建到销毁的过程，称为生命周期，共有八个阶段）
1、beforeCreate ：在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用，即实例已经创建了但是数据还没有监视，事件也还没有配置。
2、示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue生命周期</title>
<script src="js/vue.js"></script>
<script>
window.onload=function(){
let vm=new Vue({
el:'#itany',
data:{
msg:'welcome to itany'
},
methods:{
update(){
this.msg='欢迎来到南京网博！';
},
destroy(){
// this.$destroy();//销毁实例对象，即销毁组件，组件存放在内存中的数据被回收了。
vm.$destroy();
}
},
beforeCreate(){
alert('组件实例刚刚创建，还未进行数据观测和事件配置');
},
created(){ //常用！！！
alert('实例已经创建完成，并且已经进行数据观测和事件配置');
},
beforeMount(){
alert('模板编译之前，还没挂载');
},
mounted(){ //常用！！！
alert('模板编译之后，已经挂载，此时才会渲染页面，才能看到页面上数据的展示');
},
beforeUpdate(){
alert('组件更新之前');
},
updated(){
alert('组件更新之后');
},
beforeDestroy(){
alert('组件销毁之前');
},
destroyed(){
alert('组件销毁之后');
}
});
}
</script>
</head>
<body>
<div id="itany">
{{msg}}
<br> <button @click="update">更新数据</button>
<button @click="destroy">销毁组件</button>
</div>
</body>
</html>
3、vue生命周期图--对应的八个钩子函数
二、 计算属性
1、 基本用法
1、计算属性也是用来存储数据，但具有以下几个特点：
特点1：数据可以进行逻辑处理操作
特点2：对计算属性中的数据进行监视
2、计算属性 和方法的区别
将计算属性的get函数定义为一个方法也可以实现类似的功能但是之间的区别就在于：
区别1：计算属性是基于它的依赖进行更新的，只有在相关依赖发生改变时才能更新变化
区别2：计算属性是缓存的，只要相关依赖没有改变，多次访问计算属性得到的值是之前缓存的计算结果，不会多次执行，而方法是不会缓存的，每调用一次都会从新执行函数。
区别3：方法是只是某个功能，计算属性是数据要计算和更新。
3、计算属性的组成
1、计算属性由两部分组成：get和set，分别用来获取计算属性和设置计算属性
2、默认只有get，如果需要set，要自己添加
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计算属性</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="itany">
<!--
1.基本用法
-->
<h2>{{msg}}</h2>
<h2>{{msg2}}</h2> <!-- 对数据处理再显示 -->
<h2>{{msg.split(' ').reverse().join(' ')}}</h2>
<h2>{{reverseMsg}}</h2>
<button @click="change">修改值</button> <!--
2.计算属性 vs 方法
-->
<!-- <h2>{{num1}}</h2>
<h2>{{num2}}</h2>
<h2>{{getNum2()}}</h2> --> <button onclick="fn()">测试</button> <!--
3.get和set
-->
<h2>{{num2}}</h2>
<button @click="change2">修改计算属性</button> </div> <script>
var vm=new Vue({
el:'#itany',
data:{ //普通属性是个字面量形式
msg:'welcome to itany',
num1:8
},
computed:{ //计算属性是一个函数形式
msg2:function(){ //该函数必须有返回值，该函数的返回值就是你属性的值，该函数用来获取属性值，称为get函数
return '欢迎来到南京网博';
},
reverseMsg:function(){
//可以包含逻辑处理操作，同时reverseMsg依赖于msg
return this.msg.split(' ').reverse().join(' ');
},
num2:{
get:function(){
console.log('num2：'+new Date());
return this.num1-1;
},
set:function(val){ //val=111,
// console.log('修改num2值');
this.num1=val;
}
}
},
methods:{//方法直接写函数
change(){
// this.msg='i love you';
this.num1=666;
},
getNum2(){
console.log(new Date());
return this.num1-1;
},
change2(){
this.num2=111; //会自动执行num2的set函数，将111这个值传给num2
}
} }); function fn(){
setInterval(function(){
// console.log(vm.num2);
console.log(vm.getNum2());
},1000);
}
</script> </body>
</html>
vue生命周期以及vue的计算属性的更多相关文章
- vue 生命周期的详解
一.vue生命周期的解析 > 1>什么是vue生命周期 每个vue实例在被创建之前都要经过一系列的初始化过程,这个过程就是vue的生命周期.详细来说,就是Vue实例从开始创建,初始化数据, ...
- 14、前端知识点--Vue生命周期浅析
vue生命周期 每个Vue实例或组件从创建到显示再到废弃的过程就是vue的生命周期.很多时候我们希望能在这个过程中执行一些操作,于是就有了生命周期钩子. 生命周期钩子函数允许我们在实例不同阶段执行各种 ...
- Vue生命周期和钩子函数及使用keeplive缓存页面不重新加载
Vue生命周期 每个Vue实例在被创建之前都要经过一系列的初始化过程,这个过程就是vue的生命周期,在这个过程中会有一些钩子函数会得到回调 Vue中能够被网页直接使用的最小单位就是组件,我们经常写的: ...
- Vue基础进阶 之 Vue生命周期与钩子函数
Vue生命周期 Vue生命周期:Vue实例从创建到销毁的过程,称为Vue的生命周期: Vue生命周期示意图:https://cn.vuejs.org/v2/guide/instance.html#生命 ...
- 04: vue生命周期和实例属性和方法
1.4 组件的生命周期 1.说明 1. Vue将组件看成是一个有生命的个体,跟人一样,定义了各个阶段, 2. 组件的生命周期:组件的创建过程 3. 组件生命周期钩子函数:当组件处在某个阶段,要执行某个 ...
- Vue系列（二）：发送Ajax、JSONP请求、Vue生命周期及实例属性和方法、自定义指令与过渡
上一篇:Vue系列(一):简介.起步.常用指令.事件和属性.模板.过滤器 一. 发送AJAX请求 1. 简介 vue本身不支持发送AJAX请求,需要使用vue-resource.axios等插件实现 ...
- vue生命周期的介绍
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- vue 生命周期
一 vue的生命周期如下图所示(很清晰) 二 vue生命周期的栗子 注意触发vue的created事件以后,this便指向vue实例,这点很重要 <!DOCTYPE html> <h ...
- 前端MVC Vue2学习总结（二）——Vue的实例、生命周期与Vue脚手架（vue-cli）
一.Vue的实例 1.1.创建一个 Vue 的实例 每个 Vue 应用都是通过 Vue 函数创建一个新的 Vue 实例开始的: var vm = new Vue({ // 选项 }) 虽然没有完全遵循 ...
随机推荐
- centos 6.5 安装mysql 5.7.21 community
Step1: 检测系统是否自带安装mysql # yum list installed | grep mysql Step2: 删除系统自带的mysql及其依赖命令: # yum -y remove ...
- gitlab手残点错关闭注册No authentication methods configured on login page
Gitlab - 如何解決 "No authentication methods configured on login page" ? (gitlab version : 8.1 ...
- dom4j api 详解
1.DOM4J简介 DOM4J是 dom4j.org 出品的一个开源 XML 解析包.DOM4J应用于 Java 平台,采用了 Java 集合框架并完全支持 DOM,SAX 和 JAXP. DOM4J ...
- py-faster-rcnn 训练自己的数据
转载:http://blog.csdn.net/sinat_30071459/article/details/51332084 Faster-RCNN+ZF用自己的数据集训练模型(Python版本) ...
- 上传图片到数据库，读取数据库中图片并显示(C#)
from:http://blog.csdn.net/bfcady/article/details/2622701 思路:建立流对象,将上传图片临时保存到byte数组中,再用SQL语句将其保存到数据库中 ...
- OpenSSL Heart Bleed 如何修复
一 . 前言 这两天这个事件沸沸扬扬啊,有了这个bug黑客在电脑前动动手指就能获取各大电商网站.各大银行用户的用户名和密码了,屌爆了 BUG具体内容 : http://heartbleed.com ...
- 在asp.net页面上得到Castle容器的实例
在项目中使用Castle IOC容器,Asp.net程序中如何得到Castle容器内. 可以如下实现: 1.Gloabal实现接口IContainerAccessor public class Glo ...
- Linux下的Make与Makefile
原文转载自:http://www.cpplive.com/html/1776.html 另外一个不错的博客http://bbs.chinaunix.net/thread-1950588-1-1.htm ...
- sublime text 3 并列显示
alt+shift+1:显示一列 alt+shift+2:显示二列 alt+shift+3:显示三列 ......
- 利用wireshark抓取远程linux上的数据包
原文发表在我的博客主页,转载请注明出处. 前言 因为出差,前后准备总结了一周多,所以博客有所搁置.出差真是累人的活计,不过确实可以学习到很多东西,跟着老板学习做人,学习交流的技巧.入正题~ wires ...