Vue2源码解析-生命周期

两个文件，一个html一个js

<body><div id="app"></div>
</body>
<script src="./Vue.js"></script>
<script>new Vue({el: '#app',data: {str: "你好"},beforeCreate() {console.log('beforeCreate', this.$el, this.$data)},created() {console.log('created', this.$el, this.$data)},beforeMount() {console.log('beforeMount', this.$el, this.$data)},mounted() {console.log('mounted', this.$el, this.$data)},beforeUpdate() {console.log('beforeUpdate', this.$el, this.$data)},updated() {console.log('updated', this.$el, this.$data)},beforeDestroy() {console.log('beforeDestroy', this.$el, this.$data)},destroyed() {console.log('destroyed', this.$el, this.$data)},})
</script>

class Vue {constructor(options) {if (typeof options.beforeCreate === 'function') {options.beforeCreate.bind(this)();}this.$data = options.data;if (typeof options.created === 'function') {options.created.bind(this)();}if (typeof options.beforeMount === 'function') {options.beforeMount.bind(this)();}this.$el = document.querySelector(options.el);if (typeof options.mounted === 'function') {options.mounted.bind(this)();}// 编译模板...}
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/diannao/18995.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！