学习Vue第三四周的笔记
今天是学习vue的第四周，由于上一周我发的是表格的增删改查，所以这周我发上周和这周一起的代码笔记，宝子们请看。
computed 计算属性
定义:
需要通过已有属性计算得来
要用的属性不存在，
原理:底层借助了 0bjcet.defineproperty()方法提供的getter和 setter
get 函数什么时候执行?
a.初次读取时会执行一次
当依赖的数据发生改变时会被再次调用
b.优势:与 methods 实现相比，
效率更高，
调试方便
内部有缓存机制(复用)
备注：
计算属性最终会出现在 vm 上，直接读取使用即可
a.如果计算属性要被修改，那必须写 set 函数去响应修改，且 set 中要引起计算时依赖的数据发生改变
b.如果计算属性确定不考虑修改，可以使用计算属性的简写形式
watch 监视属性
1.当被监视的属性变化时，回调函数自动调用，进行相关操作
2.监视的属性必须存在，才能进行监视，既可以监视 data，也可以监视计算属性
3.配置项属性 immediate:false，改为 true，则初始化时调用一次 handler(newValue,oldValue)
4.监视有两种写法
a.创建 Vue 时传入 watch:{}配置
b.通过 vm.$watch()监视
深度侦听
1.Vue 中的watch默认不监测对象内部值的改变(一层)
2.在 watch中配置deep:true，可以监测对象内部值的改变(多层)
注意：
Vue自身可以监测对象内部值的改变，但Vue 提供的 watch默认不可以
2.使用watch 时根据监视数据的具体结构，决定是否采用深度监视
计算属性 VS 侦听属性
computed和watch 之间的区别
1.computed 能完成的功能，watch 都可以完成。watch能完成的功能，computed不一定能完成，例如 watch 可以进行异步操作，computed做不到。
两个重要的小原则
所有被 vue 管理的函数，最好写成普通函数，这样 this的指向才是 vm或 组件实例对
象
所有不被 vue 所管理的函数
(定时器的回调函数、ajax 的回调函数等,Promise 的回调函数)，最好写成箭头函数，这样 this的指向才是vm或 组件实例对象。
计算属性和侦听属性的测试代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<div>
<h1>今天的天气{{str}}</h1>
<h2>{{userName}}</h2>
<h3>{{obj.id}}</h3>
<button @click="func()">点击切换天气</button>
</div>
</div>
</body>
<script src="../vue.js"></script>
<script>
Vue.config.productionTip = false;
var vm = new Vue({
el:"#app",
data() {
return {
bool:true,
userName:"",
obj:{
id:99,
}
}
},
methods: {
func(){
this.bool = !this.bool;
}
},
computed:{
str(){
return this.bool?"炎热":"凉爽"
}
},
watch:{
obj:{
immediate:false,
deep:true,
handler(newVlaue,oldValue){
console.log("--------obj-------");
console.log(newVlaue);
console.log(oldValue);
}
},
bool:{
immediate:true,
handler(newVlaue,oldValue){
console.log(newVlaue);
console.log(oldValue);
if(newVlaue==true){
this.userName = "张三";
this.obj.id = 100;
}else{
this.userName = "李四";
this.obj.id = 99;
}
}
},
str(newVlaue,oldValue){
console.log(newVlaue);
console.log(oldValue);
console.log(this);
}
},
directives:{
}
})
// vm.$watch("userName",{
// immediate:false,
// handler(newVlaue,oldValue){
// console.log("--------userName---------");
// console.log(newVlaue);
// console.log(oldValue);
// console.log(this);
// }
// })
vm.$watch("userName",function(newVlaue,oldValue){
console.log("--------userName---------");
console.log(newVlaue);
console.log(oldValue);
console.log(this);
console.log(this.bool);
})
</script>
</html>
过滤器
定义:
对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理)
注册过滤器:
Vue.filter(name，callback)全局过滤器
new Vue{filters:{}}同部过滤器
使用过滤器:
{{xxx|过滤器名}}或v-bind:属性=“xxx|过滤器名”
备注:
a.过滤器可以接收额外参数，多个过滤器也可以串联
b.并没有改变原本的数据，而是产生新的对应的数据
生命周期
什么是生命周期？
a.又名生命周期回调函数、生命周期函数、生命周期钩子
b.是什么: Vue 在关键时刻帮我们调用的一些特殊名称的函数
c.生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的
d.生命周期函数中的 this 指向是 vm 或 组件实例对象
生命周期
beforeCreate初始化之前,不能获取data中的数据
created初始化之后,获取data中的数据
beforeMount解析前|挂载前
mounted解析后|挂载后
beforeUpdate更新前
updated更新后
beforeDestroy销毁前
destroyed销毁后
过滤器和生命周期的实例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<h1>{{time}}</h1>
<h1>{{time|times}}</h1>
<h1>{{time|times|myTime}}</h1>
<h1 v-show="bool" class="box">{{userName}}</h1>
<button @click="func()">点击</button>
<hr>
<h1 :style="{opacity}">我是测试文本</h1>
<button @click="opacity=1">点击显示</button>
<button @click="stop()">停止</button>
</div>
</body>
<script src="../vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.10.6/dayjs.min.js"></script>
<script>
Vue.config.productionTip = false;
// 生命周期
// 1.生命周期函数，钩子函数
// 2.生命周期函数命名不能修改
// 3.this指向Vue实例(vm)
// ----------------------
// 过滤器
// 1.局部过滤器new Vue({filters:{名称(value){}}})，
// 全局过滤器Vue.filter("名称",function(value){})
// 2.返回一个新的数据
// 3.使用时|名称, 多个过滤器串联，拿取的值是前一个
Vue.filter("myTime",function(value){
// console.log(value);
// return value.slice(0,11);
// return value.substring(0,11);
return value.substr(0,11);
})
var vm = new Vue({
el:"#app",
data() {
return {
time:Date.now(),
userName:"张三",
bool:true,
// opacity:"opacity:1",
opacity:1,
timeValue:"",
}
},
methods: {
sum(){
return 100;
},
func(){
this.userName = "9999"
},
stop(){
this.$destroy();
}
},
// beforeCreate初始化之前,不能获取data中的数据
beforeCreate() {
// console.log(this.userName);
// console.log(this.sum());
},
// created初始化之后,获取data中的数据
created() {
// console.log(this.userName);
// console.log(this.sum());
},
// beforeMount解析前|挂载前
beforeMount() {
// this.bool = false;
// document.getElementsByClassName("box")[0].style.color = "red";
},
// mounted解析后|挂载后
mounted() {
// this.userName = "王五";
// document.getElementsByClassName("box")[0].style.color = "red";
this.timeValue = setInterval(()=>{
this.opacity-=0.01;
if(this.opacity<=0){
this.opacity=1;
}
},10)
},
// beforeUpdate更新前
beforeUpdate() {
// setTimeout(()=>{
// this.userName = "李四";
// },1000)
},
// updated更新后
updated() {
// this.userName = "王五";
},
// beforeDestroy销毁前
beforeDestroy() {
clearInterval(this.timeValue);
console.log("触发了销毁前");
},
// destroyed销毁后
destroyed() {
console.log("触发了销毁后");
},
// 局部过滤器
filters:{
times(value,str="YYYY年MM月DD日 HH:mm:ss"){
// console.log(value);
return dayjs(value).format(str);
// return new Date(value);
// let a = new Date(value);
// return a.toISOString();
// let day = parseInt(value/1000/60/60/24);
// let days = day;
// let year = 1970;
// while (day>=366) {
// if(year%4==0){
// day-=366;
// }else{
// day-=365;
// }
// year+=1;
// }
// let month = 1;
// while(day>=28){
// if(month==1||month==3||month==5||month==7||month==8||month==10||month==12){
// if(day<31){
// break;
// }
// day-=31;
// }else if(month==4||month==6||month==9||month==11){
// if(day<30){
// break;
// }
// day-=30;
// }else if(month==2&&year%4==0){
// if(day<29){
// break;
// }
// day-=29;
// }else{
// if(day<28){
// break;
// }
// day-=28;
// }
// month+=1;
// }
// console.log(year+"年"+month+"月"+(day+1)+"日");
}
}
})
console.log(vm);
</script>
</html>
总结：
常用的生命周期钩子
mounted 发送 ajax 请求、启动定时器、绑定自定义事件、订阅消息等初始化操作
a.
beforeDestroy 清除定时器、解绑自定义事件、取消订阅消息等收尾工作
D.
关于销毁 Vue 实例
a.销毁后借助 Vue 开发者工具看不到任何信息!
销毁后自定义事件会失效，但原生 DOM 事件依然有效
b，
一般不会在 beforeDestroy 操作数据，因为即便操作数据，也不会再触发更新流程了。
这周就到这啦，感谢宝子们观看。
842
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
