async & webpack & 生命周期

async/await

• 以 async/await 为例，说明 babel 插件怎么搭

webpack的babel本身不支持async/await

需要安装

npm install --save-dev babel-plugin-transform-runtime
npm install --save babel-runtime // `babel-plugin-transform-runtime` 插件本身其实是依赖于 `babel-runtime` 的，但为了适应 `npm install --production` 强烈建议添加该依赖。

在webpack文件夹目录新增一个. babelrc,这份是babel配置文件

然后在里面写入

{
   
  "plugins": ["transform-runtime", "babel-plugin-transform-regenerator", "babel-plugin-transform-es2015-modules-commonjs"]
}

把webpack的use里面的options注释掉

{
   
    test: /\.js$/,
    // 除了node_modules|bower_components所有的js文件都用babel-loader处理
    exclude: /(node_modules|bower_components)/,
    use: {
   
        loader: 'babel-loader',
        // options: {
   
        //     presets: ['@babel/preset-env']
        // }
    }
}

生命周期

// 四大生命周期:
// 编译(创建)   beforeCreate()   created()
// 挂载         beforeMount()    mounted()       
// 更新         beforeUpdate()   updated()
// 销毁         beforeDestroy()  destroyed()


// 上台前，毫无准备 	//没数据 没模板
beforeCreate() {
   
    console.log("beforeCreate")
    console.log(this.$data)
    console.log(this.el)
},
// 背台词,化妆		 //有数据，没模板 
created() {
   
    console.log("created")
    console.log(this.$data)
    console.log(this.$el)
},

// 没登舞台			//数据有，有模板，但没有真实DOM
beforeMount() {
   
    console.log("beforeMount")
    console.log(this.$data)
    console.log(this.$el)
    console.log(document.querySelector(".site-header"