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({ // 选项 }) 虽然没有完全遵循 ...
随机推荐
- linux常用命令系列
自己开始接触linux系统已经两年了,刚到现场进行系统维护的时候,只知道ls和cd命令,所以我被迫开始学习linux,虽然现在每天都在linux系统上进行一些操作,但是感觉自己半路出家一样:可能知道某 ...
- SAML2.0 协议初识（三）——IDP
IDP,即提供身份认证服务的一端,通常,当 IDP 接收到 SP 发送的 SAML 认证请求后,解析 SAMLRequest 参数,包括 acs 地址.SP EntityId.绑定方式.是否加密等信息 ...
- 本地运行storm时报错
java.lang.NoClassDefFoundError: backtype/storm/topology/IRichSpout at java.lang.Class.getDeclaredMet ...
- 在HTML5中如何提高网站前端性能
1. 用web storage替换cookiesCookie最大的问题是每次都会跟在请求后面.在HTML5中,用sessionStorage和localStorage把用户数据直接在客户端,这样 ...
- 机器学习之svm---cv wiki svm
http://www.opencv.org.cn/opencvdoc/2.3.2/html/doc/tutorials/ml/introduction_to_svm/introduction_to_s ...
- 蓝桥杯 第三届C/C++预赛真题（4） 奇怪的比赛（递归）
某电视台举办了低碳生活大奖赛.题目的计分规则相当奇怪: 每位选手需要回答10个问题(其编号为1到10),越后面越有难度.答对的,当前分数翻倍:答错了则扣掉与题号相同的分数(选手必须回答问题,不回答按错 ...
- 蓝桥杯 C/C++参考题目 开平方（数学题，迭代法求开方）
开平方 如果没有计算器,我们如何求2的平方根?可以先猜测一个数,比如1.5,然后用2除以这个数字.如果我们猜对了,则除法的结果必然与我们猜测的数字相同.我们猜测的越准确,除法的结果与猜测的数字就越接近 ...
- TypeScript 基本类型（一）
1.boolean 布尔值 true/false let isDone: boolean = false; 2.number 数字:和JavaScript 一样,TypeScript 里的所有数字都是 ...
- web.xml配置文件详解
笔者从大学毕业一直从事网上银行的开发,都是一些web开发项目.接下来会写一些关于web开发相关的东西,也是自己工作以来经常用到的内容.本篇先从web.xml文件开始介绍,笔者接触到的项目中都有这个文件 ...
- HDU3308(LCIS) 线段树好题
题目链接:传送门 题目大意:给你n个数,m个操作.操作有两种:1.U x y 将数组第x位变为y 2. Q x y 问数组第x位到第y位连续最长子序列的长度.对于每次询问,输出一个答案 题目思路: ...