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支持热重载,更改完之后无需刷新页面