<!--
* @Description:
* @Version: 2.0
* @Autor: Ricardo
* @Date: 2020-09-21 15:39:58
* @LastEditors: Seven
* @LastEditTime: 2020-09-22 10:12:38
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
{{ msg }},
{{ student.name }}
</div>
<!-- 渲染
发生改变时 会重新在加载数据
未使用 的 渲染页面 操作dom 会耗费性能 优化条件的减少dom的操作
更改数据后 页面不会立即重新渲染页面
页面渲染的操作是异步执行
同步执行栈,异步队列(宏任务 , 微任务 event loop事件环)
异步队列 --执行顺序也就是 微任务 --- 》宏任务
-->
<script src="../vue.js"></script>
<script type="text/javascript">
// 需要暴露属性和方法 放在原型链上 构造函数的this
function Ceshi(config) {
// const this={};
// config= {data:{"键值对"}}
this.data = config.data
// return this
for (let key in config.data) {
this[data] = config.data[key]
}
}
/*
vue data在 vm对象的实例对象上 例如 vm.xxx 获取对象上的属性
响应式 是 监控对象 实时监测
监测数据变化
object={attrs {}}
vue 中数据监测对象太多
Object.defineProperty 数据劫持 解决数据监测 监听对象
-------$data ------ _data-----
前者暴露给开发者 使用的数据
后者 则是 vue内部使使用的数据
未经声明的属性 不会报错
*/
const vm = new Vue({
el: "#app",
data: {
msg: "插值的内容",
student: {
name: "name1",
age: 12,
}
}
});
vm.msg = "已修改的name"
const vh = new Vue({
el: "#app",
data: {
msg: "插值的内容",
student: {
name: "name1",
age: 12,
}
}
});
console.log(vm.msg);
// 使用vm.$nextTick()
vm.$nextTick(() => {
// callback
console.log(vh.$el.innerHTML);
});
// 使用Vue.nextTick(()=>{})
Vue.nextTick(() => {
console.log(vh.$el.innerHTML);
});
/*
Vue.nextTick()
内部函数 this指向window
*/
Vue.nextTick(function () {
console.log(this); // window
});
// this.$nextTick(callback)
vm.$nextTick(function () {
console.log(this); // vm实例
});
// this.$nextTick(callback)的实现
/*
异步执行任务我 分为 宏任务macro 和 微任务micro
宏任务 执行时间慢,例如settimeout
微任务快例如promise then()
微任务在前,宏任务在后
*/
// promise > timeout
setTimeout(() => {
console.log("timeout");
}, 0);
Promise.resolve().then(()=>{
console.log("这是 promise ");
});
// 在nextTick的实现源码中,会先判断是否支持微任务,不支持后,才会执行宏任务
if (typeof promise !== "undefined") {
// 判断 浏览器引擎中 是否有promise
// IE 不支持 promise
const p = promise.resolve();
}else if (typeof MutationObserver !== "undefined") {
// 微任务 突变观察 监听文档的中的文字的变化,如果文字有变化会执行回调函数
} else if(typeof setImmediate !=="undefined"){
// 宏任务
} else{
// 宏任务
// 如果上面都不能执行,那么则会调用setTimeout
}
</script>
</body>
</html>
```
vue学习 --- vue的响应式1
最新推荐文章于 2024-08-30 20:29:15 发布