标签：iss new vat 激活 += vue 操作dom 性能 def
<body> <div id="main"> <App /> </div> <script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script> <script type="text/javascript"> var Test = { data(){ return{ msg:‘哈哈哈‘, } }, template:`<div id="test"> <h3>{{msg}}</h3> <button type="button" @click="clickHandler">修改msg</button> </div> `, methods:{ clickHandler(){ this.msg += ‘alex‘ } }, //组件创建之前 用的不多 beforeCreate() { //一般不用 console.log(‘组件创建前：‘+this.msg); //undefined }, //组件创建之后 created() { //可以操作数据，发送ajax请求，并且可以实现 //vue对页面的影响 应用：发送ajax请求 console.log(‘组件创建后：‘+this.msg); //哈哈哈 }, //装载数据到DOM之前 用的不多 beforeMount() { console.log(‘DOM装载前：‘+document.getElementById(‘app‘)); //null }, //装载数据到DOM之后 mounted() { //可以操作DOM console.log(‘DOM装载后：‘+document.getElementById(‘app‘)); //<div id="app"><div id="test"></div></div> }, //获取更新之前的DOM beforeUpdate() { console.log(‘DOM更新前：‘+document.getElementById(‘test‘).innerHTML); //<h3>哈哈哈</h3> <button type="button">修改</button> }, //获取更新之后的DOM updated() { console.log(‘DOM更新后：‘+document.getElementById(‘test‘).innerHTML); //<h3>哈哈哈alex</h3> <button type="button">修改</button> }, //组件被销毁前 用的不多 beforeDestroy() { console.log(‘组件销毁前‘); //点按钮“创建和销毁” 没有用keep-alive，性能不好 }, //组件被销毁后 用的不多 destroyed() { console.log(‘组件销毁后‘); //点按钮“创建和销毁” 没有用keep-alive，性能不好 }, //组件被激活后 要用就用这个 activated() { console.log(‘组件被激活了‘); //点按钮“创建和销毁” 用keep-alive，性能好 }, //组件被停用后 要用就用这个 deactivated() { console.log(‘组件被停用了‘); //点按钮“创建和销毁” 用keep-alive，性能好 } }; var App={ data(){ return { isShow:true, } }, //使用keep-alive将DOM缓存，性能好一些 template:`<div id="app"> <keep-alive><Test v-if="isShow" /></keep-alive> <button type="button" @click="isShow=!isShow">创建和销毁</button> </div>`, components:{ Test }, }; new Vue({ el: ‘#main‘, template:‘‘, components:{ App } }); </script> </body>
组件的生命周期：
说明：虚拟DOM渲染速度比jQuery的DOM快，所以现在都使用js框架，而不使用jQuery
标签：iss new vat 激活 += vue 操作dom 性能 def
原文地址：https://www.cnblogs.com/staff/p/11759772.html
