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({ // 选项 }) 虽然没有完全遵循 ...
随机推荐
- mui调用webservice
document.getElementById("confirm").addEventListener('tap', function() {var respnoseEl = do ...
- regcomp/regexec/regfree--POSIX regex functions
语法 #include <sys/types.h> #include <regex.h> int regcomp(regex_t *preg, const char *rege ...
- c++11线程池实现
咳咳.c++11 增加了线程库,从此告别了标准库不支持并发的历史. 然而 c++ 对于多线程的支持还是比較低级,略微高级一点的使用方法都须要自己去实现,譬如线程池.信号量等. 线程池(thread p ...
- zabbix 源码安装
操作系统:CentOS IP地址:192.168.21.127 Web环境:Nginx+MySQL+PHP zabbix版本:Zabbix 2.2 LTS 备注:Linux下安装zabbix需要有LA ...
- dva学习---effects异步中通过select获取当前的state
根据 在组件中dispatch一个action的例子中,如果要在effects中对于param数据和当前的state数据进行再出处理,这里怎么获取state呢?采用select,如下: e ...
- [Tips] bzr Import error
# bazzar error on Mac Marvericks: 192:~ piaoger$ bzrbzr: ERROR: Couldn't import bzrlib and dependenc ...
- 第一百五十九节，封装库--JavaScript，表单序列化结合ajax提交数据
封装库--JavaScript,表单序列化结合ajax提交数据 封装库,表单序列化方法 /** xu_lie_biao_dan()方法,表单序列化方法,将自动获取指定表单里面的各项字段name值和va ...
- Unity3D和网页数据交互的基本原理
简介: 1.Unity3D的游戏引擎是和编辑器集成在一起的,所有它也是一个制作/开发平台. 2.Unity3D是使用JavaScript.C#作为核心脚本语言来驱动事个游戏引擎. 3.平台可以发布Ex ...
- 微软公布带外安全更新MS14-068
11月19日,微软公布了带外更新MS14-068以解决Windows 系统中的一个安全漏洞,该补丁安全等级为"严重". MS14-068 | Kerberos 中的漏洞可能同 ...
- AutoMapper整理收集
http://www.cnblogs.com/jobs2/p/3503990.html http://www.cnblogs.com/1-2-3/p/AutoMapper-Best-Practice. ...