当前位置：首页 > news >正文

vue升级题

news 来源：原创 2024/5/20 17:20:55

不熟悉的：

2，

3.你用过befcoreDetory 吗？清除定时器，第一个和第二个再看一下

实例加载完成是在哪个生命周期--beforecreate

7.父子组件生命周期执行顺序？为什么这么渲染？场景

8.简单描述每个周期具体适合那些场景？（需要在问）

只是钩子，触发事件

每个生命周期的钩子函数去做这个事情，不是执行

你卸载的时候会触发这个钩子

13.v都是语法糖；v-model只能用一次，sync可以父子组件的数据达到同步

16：v-on;v-bind的原理

21.vue-loader:解析vue文件；template-解析成html;script标签解析成js,style里的东西解析成css

是webpack中的

、允许用单文件

怎么实现

diff-vdom看下源码

22.diff算法用了key;

24：

26：

27：

28
30

33.Vue的路由实现：hash模式和history模式

35-37

41：active-class

说下route-link原理：点击跳转；写个div 加一个点击事件原理；to:跳转到的页面

42：keep-live最多能缓存几个；缓存的这个机制是怎么实现的

标签页缓存

-50

1.vue怎么实现的减少了dom的操作，因为我们只需要关注数据就可以

https://blog.csdn.net/qq_40055200/article/details/134630413?csdn_share_tail=%7B%22type%22%3A%22blog%22%2C%22rType%22%3A%22article%22%2C%22rId%22%3A%22134630413%22%2C%22source%22%3A%22qq_40055200%22%7D

vue 双向绑定的源码实现

这段代码实现了一个简化版的Vue双向绑定，主要包括以下几个部分：

defineReactive 函数：使用 Object.defineProperty 定义对象的属性，实现数据的响应式绑定。
observe 函数：遍历对象的属性，对每个属性调用 defineReactive 进行响应式绑定。
compile 函数：编译模板，找到带有 v-model 属性的节点，并监听其输入事件，实现双向绑定。
compileNode 函数：编译文本节点，将模板中的 {{}} 表达式解析为对应的数据，并创建一个 Watcher 对象进行监听。
compileFragment 函数：递归遍历模板中的所有节点，调用 compileNode 进行编译。
Vue 构造函数：初始化 Vue 实例，将 data 数据进行响应式绑定，并编译模板。
Watcher 对象：观察者对象，用于监听数据变化并更新视图。
Dep 对象：依赖收集对象，用于管理和通知所有的观察者对象。

function defineReactive(obj, key, val) {Object.defineProperty(obj, key, {enumerable: true,configurable: true,get: function reactiveGetter() {// 在读取属性值时，进行依赖收集// ...return val;},set: function reactiveSetter(newVal) {if (newVal === val) {return;}// 在更新属性值时，触发更新// ...val = newVal;}});
}function observe(obj) {if (typeof obj !== 'object' || obj === null) {return;}Object.keys(obj).forEach(function(key) {defineReactive(obj, key, obj[key]);});
}function compile(node, vm) {if (node.nodeType === 1) {var attrs = node.attributes;for (var i = 0; i < attrs.length; i++) {if (attrs[i].nodeName === 'v-model') {var exp = attrs[i].nodeValue;node.value = vm[exp];node.addEventListener('input', function(e) {// 监听输入事件，更新数据vm[exp] = e.target.value;});node.removeAttribute('v-model');}}}
}function compileNode(node, vm) {var reg = /\{\{(.*)\}\}/;if (node.nodeType === 1) {compile(node, vm);} else if (node.nodeType === 3 && reg.test(node.nodeValue)) {var exp = RegExp.$1;exp = exp.trim();new Watcher(vm, exp, function(value) {// 监听数据变化，更新视图node.nodeValue = value;});}
}function compileFragment(fragment, vm) {var childNodes = fragment.childNodes;Array.prototype.slice.call(childNodes).forEach(function(node) {compileNode(node, vm);if (node.childNodes && node.childNodes.length > 0) {compileFragment(node, vm);}});
}function Vue(options) {this.$options = options;this._data = options.data;observe(this._data);var compiled = document.createDocumentFragment();this.$el = document.querySelector(options.el);compiled.appendChild(this.$el.cloneNode(true));compileFragment(compiled, this);this.$el.parentNode.replaceChild(compiled, this.$el);
}function Watcher(vm, exp, cb) {this.vm = vm;this.exp = exp;this.cb = cb;this.value = this.get();
}Watcher.prototype = {update: function() {var newVal = this.vm[this.exp];if (newVal !== this.value) {this.value = newVal;this.cb.call(this.vm, newVal);}},get: function() {Dep.target = this;var value = this.vm[this.exp];Dep.target = null;return value;}
};function Dep() {this.subs = [];
}Dep.prototype = {addSub: function(sub) {this.subs.push(sub);},notify: function() {this.subs.forEach(function(sub) {sub.update();});}
};Dep.target = null;