笔记:VUE常见问题

144 阅读3分钟

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;
}

数组去重:

  1. 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)])
  1. 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))
  1. 新建数组,利用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))
  1. 先用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))

具体看JavaScript数组去重(12种方法,史上最全)