ES6常用语法：
1.let
- 解决了变量提升
- 带来了块级作用域
2.const
-解决了变量提升
-定义之后不能修改,否则报错
-定义的时候必须赋值
3.箭头函数
- arguments不能使用
- this的指向问题,指向箭头函数被定义时的作用域
Vue的声明周期:
1. beforecreated
2. created
3. beforeMount
4. mounted
5.beforeUpdate
6.updated
7.activated
8.deactivated
9.beforeDestory
10.destoryed
vue自带虚拟dom。 先加载虚拟dom
activated & deactivated 来控制组件创建和销毁 替代 destoryed & beforeDestory 降低开销 组件需要用 <keep-alive><keep-alive/> 该钩子在服务器渲染时不用 , 会缓存数据 不会频繁创建销毁
声明周期html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../statics/vue.min.js"></script>
</head>
<body>
<div id="app">
{{ message }}
<button @click="myClick">点击修改欢迎语</button>
</div>
<script>
new Vue({
el: "#app",
data: {
message: "Hello Vue",
},
methods: {
myInit: function () {
console.log(this.message);
},
myClick: function () {
this.message = "Hello World";
}
},
beforeCreate(){
console.group('beforeCreate: ');
console.log('el: ', this.$el);
console.log('data: ', this.$data);
console.log('myInit: ', this.myInit);
console.log('message: ', this.message);
},
created(){
console.group('created: ');
console.log('el: ', this.$el);
console.log('data: ', this.$data);
console.log('myInit: ', this.myInit);
console.log('message: ', this.message);
},
beforeMount(){
console.group('beforeMount: ');
console.log('el: ', this.$el);
console.log('data: ', this.$data);
console.log('myInit: ', this.myInit);
console.log('message: ', this.message);
},
mounted(){
console.group('mounted: ');
console.log('el: ', this.$el);
console.log('data: ', this.$data);
console.log('myInit: ', this.myInit);
console.log('message: ', this.message);
},
beforeUpdate(){
console.group('beforeUpdate: ');
console.log('el: ', this.$el);
console.log('data: ', this.$data);
console.log('myInit: ', this.myInit);
console.log('message: ', this.message);
console.log("beforeData: ", document.getElementById("app").innerHTML);
},
updated(){
console.group('updated: ');
console.log('el: ', this.$el);
console.log('data: ', this.$data);
console.log('myInit: ', this.myInit);
console.log('message: ', this.message);
console.log("updated: ", document.getElementById("app").innerHTML);
}
})
</script>
</body>
</html>
1.vue的webpack支持热重载,更改完之后无需刷新页面