VUE:vue源码--data劫持(*****五颗星)
注意:
Object.defineProperty(obj, prop, descriptor) 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象。
1.vue源码--data劫持
index.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>手写vue添加事件</title> </head> <body> <div id="app"> <h1>{{ str }} <span>啦啦啦</span></h1> {{str}} <p>{{a}}</p> <button @click="btn">按钮</button> </div> <script type="text/javascript" src="newvue.js"></script> <!-- <script type="text/javascript" src="vue.js"></script> --> <script type="text/javascript"> new Vue({ el: '#app', data: { str: '小明', a: "louie" }, 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) }, methods: { btn(e){ console.log(this) console.log(this.str) } } }) </script> </body> </html>
newvue.js:
// newvu
剩余60%内容,订阅专栏后可继续查看/也可单篇购买
前端面试题 文章被收录于专栏
前端面试的一些常问问题、问题的具体实现(可直接运行)以及底层原理