1.Vue的优点及缺点
vue最核心的两个特点:
响应式:
通过MVVM思想实现数据的双向绑定,通过虚拟DOM让我们可以用数据来操作DOM,而不必去操作真实的DOM,提升了性能。且让开发者有更多的时间去思考业务逻辑。组件化:
把一个单页应用中的各个模块拆分到一个个组件当中,或者把一些公共的部分抽离出来做成一个可复用的组件。所以组件化带来的好处就是,提高了开发效率,方便重复使用,使项目的可维护性更强。缺点:
vue 实例创建后,再向其上添加属性,不能监听
Vue在初始化数据时,默认给data中的属性使用Object.defineProperty为每个数据属性添加了get和set。get和set允许Vue观察数据的更改并触发更新,但是实例化后操作的属性,这个属性不会被vue处理vue的数组变化无法被监听
因为Vue实现响应式数据的核心API是Object.defineProperty.而Object.defineProperty的一个缺陷就是无法监听数组变化当直接使用索引(index)设置数组项时,不会被vue检测到. 只有使用以下方法可以检测到数组变化
push();
pop();
shift();
unshift();
splice();
sort();
reverse();
Vue.set(app.myArray,index,newVal);
不利于SEO
搜索引擎的基础爬虫的原理就是抓取你的url,然后获取你的html源代码并解析。 而你的页面通常用了vue等js的数据绑定机制来展示页面数据,爬虫获取到的html是你的模型页面而不是最终数据的渲染页面,所以说用js来渲染数据对seo并不友好。1.导航不可用,如果一定要导航需要自行实现前进、后退。(由于是单页面不能用浏览器的前进后退功能,所以需要自己建立堆栈管理)。
2.初次加载时耗时多。
2.Vue中hash模式和history模式的区别
| url显示 | 实现方式 | |
|---|---|---|
| hash | 夹杂着#号 | onhashchange事件(监听location.hash的改变) |
| history | 没有#号 | pushState()可以改变url地址且不会发送请求 replaceState()可以读取历史记录栈,还可以对浏览器记录进行修改。 |
3.冒泡排序算法和数组去重
冒泡排序:
for (let i = 0; i < arr.length; i++) {
let flag = true; //如果某一次循环中没有交换过元素,那么意味着排序已经完成了。
for (let j = 0; j < arr.length - i - 1; j++) {
if (arr[j] > arr[j + 1]) {
flag = false;
let temp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = temp;
}
}
if (flag) break;
}
return arr;
}
数组去重:
new Set(arr)
var arr = [1,1,2,5,6,3,5,5,6,8,9,8];
console.log(Array.from(new Set(arr)))
// console.log([...new Set(arr)])
for循环嵌套,splice去重
function unique (origin) {
let arr = [].concat(origin);
for (let i = 0; i < arr.length; i++) {
for (let j = i + 1; j < arr.length; j++) {
if (arr[i] == arr[j]) {
arr.splice(j, 1);
j--;
}
}
}
return arr;
}
var arr = [1,1,2,5,6,3,5,5,6,8,9,8];
console.log(unique(arr))
- 新建数组,利用
indexOf或者includes去重
function unique (arr) {
let res = []
for (let i = 0; i < arr.length; i++) {
if (!res.includes(arr[i])) {
res.push(arr[i])
}
}
return res;
}
var arr = [1,1,2,5,6,3,5,5,6,8,9,8];
console.log(unique(arr))
- 先用
sort排序,然后用一个指针从第0位开始,配合while循环去重
function unique (arr) {
arr = arr.sort(); // 排序之后的数组
let pointer = 0;
while (arr[pointer]) {
if (arr[pointer] != arr[pointer + 1]) { // 若这一项和下一项不相等则指针往下移
pointer++;
} else { // 否则删除下一项
arr.splice(pointer + 1, 1);
}
}
return arr;
}
var arr = [1,1,2,5,6,3,5,5,6,8,9,8];
console.log(unique(arr))