240304Note: 竹云 前端

[Geekiter]

5.跨域问题

• 同源策略，限制一个源origin的文档与脚本与另一个源进行交互，如果协议、域名或者端口有一个不同就会视为不同的源。
• 表现
  • 无法读取Cookie、localstorage、indexdb
  • 无法接触dom
  • 无法发送ajax请求，会请求无法响应
• 解决方法
  • CORS：服务器设置Access-Control-Allow-Origin响应头。允许特定的外域请求，最常用的方法
  • JSONP：json with padding，利于script没有跨域的相知，动态的创建script的方法来发送请求，但是只支持GET请求
  • 代理服务器，前端发送到本地服务器，然后转发到目标服务器
  • 文档域，通过这只document.domain为相同的主域来实现跨域
  • 窗口消息，允许来自不同源的窗口进行安全的跨域通讯
  • WebSocket

6.闭包，然后我谈到了内存泄露和溢出

7.怎么避免内存泄露溢出

• 限制闭包使用，减少闭包持有的外部变量
• 手动释放内存，设为null
• 使用弱引用

8.原型和原型链，到达顶部没找到属性和方法返回什么

每个js对象在创建时，都会与另外一个对象关联起来，这个关联的对象就被称为原型。每个对象都可以从其原型继承属性方法。

function Person(name){
	this.name = name;
}

Person.prototype.sayHello = function(){
	...
}

const alice = new Person("Alice");
alice.sayHello()

原型链

function Animal(name){
	this.name = name;
}

Animal.prototype.eat = function(){
	console.log("")
}

function Dog(name){
	Animal.call(this, name);
}

Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

Dog.prototype.bark = function(){
	console.log("woof!");
}

cosnt buddy = new Dog("buddy");
buddy.eat()
buddy.bark()

9.原型链的顶部
Object.prototype null

10.vue的响应式原理

忘记说了怎么对数组进行响应式原理的？

const arrayProto = Array.prototype;
const arrayMethods = Object.create(arrayProto);

const methodsToPath = [
"push",
"pop",
"shift",
"unshift",
"splice",
"sort",
"reverse"
]
methodToPatch.forEach(function(method){
	const original = arrayProto[method];
	Object.defineProperty(arrayMethods, method, {
		value: function mutator(...args){
			const result = original.apply(this, args);
			const ob = this.__ob__;
			let inserted;
			switch(method){
				case "push";
				case "unshift";
					inserted = args;
					break;
				case "splice":
					inserted = args.slice(2);
					break;
			}
			if(inserted) ob.observeArray(inserted);
			ob.dep.notify();
			return result;
		},
		enumerable: false,
		writable: true,
		cofigurable: true
	})
})

11.vue2和vue3的区别

• 响应式系统
  • Vue2使用Object.defineProperty
  • Vue3 基于Es6的proxy
• 组合式API
  • 2主要使用选项式API，data、methods、props
  • 3引入组合式API，setup、reactive、ref
• 性能
  • Vue3的性能更好
• ts支持
• 内置组件和API
  • teleport和suspense
• 编译器和工具链
• 自定义渲染器API

12.computed和watch的区别

• 计算逻辑
  • computed适合计算逻辑
  • watch适合处理数据变化的副作用
• 性能
  • computed只有依赖发生变化时才会重新计算，watch没有缓存，数据每次都会执行回调
• 使用场景
  • computed适合同步操作，watch适用于观察数据变化执行异步操作。

13.路由的hash模式和history模式

14.常用通信方式

• props和events
• event bus
• vuex
• project/inject
• refs
• attrs, listeners

15.vuex。。×

16.持久化存储的缺点

• 性能
• 存储限制
• 安全
• 数据一直
• 开发复杂性

16.自己定义的组件