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%内容,订阅专栏后可继续查看/也可单篇购买
前端面试题 文章被收录于专栏
前端面试的一些常问问题、问题的具体实现(可直接运行)以及底层原理
