VUE：vue源码--更新视图（*****五颗星）
注意：
hasOwnProperty() 方法会返回一个布尔值，指示对象自身属性中是否具有指定的属性（也就是，是否有指定的键）。所有继承了 Object 的对象都会继承到 hasOwnProperty 方法。这个方法可以用来检测一个对象是否含有特定的自身属性；和 in 运算符不同，该方法会忽略掉那些从原型链上继承到的属性。即使属性的值是 null 或 undefined，只要属性存在，hasOwnProperty 依旧会返回 true。
1.vue源码--更新视图
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 }}</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: 'str',
a: "a"
},
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){
this.str="str改变了"
console.log(this.str)
}
}
})
</script>
</body>
</html>
newvue.js：
// newvue.js
class Vue{
constructor(options){
this.$options=options
//5.更新视图，先创建对象this.$watchEvent={}，只要一渲染就存储进来
this.$watchEvent={}
// 2.生命周期
if(typeof options.beforeCreate=="function"){
options.beforeCreate.apply(this)
}
// data
this.$data=options.data
this.proxyData()
this.observe()
if(typeof options.created=="function"){
options.created.apply(this)
}
if(typeof options.beforeMount=="function"){
options.beforeMount.apply(this)
}
// 节点
剩余60%内容，订阅专栏后可继续查看/也可单篇购买
前端面试题 文章被收录于专栏
前端面试的一些常问问题、问题的具体实现（可直接运行）以及底层原理
国家电网工作强度 98人发布