zoukankan      html  css  js  c++  java
  • vue基础

    谈谈你对MVVM开发模式的理解

    • 包括Model(数据模型)、View(ui层)、ViewModel(视图数据模型)

    简述Vue的响应式原理

    • Vue实例创建时,vue会遍历data选项做的属性,用Object.defineProperty将它们转为getter/setter并且在内部追踪相关依赖,在属性被访问和修改时通知变化;
    • 每个组件实例都有相应的watcher程序实例,它会在组件渲染的过程中把属性记录为依赖,之后当依赖项的setter被调用时,会通知watcher重新计算,从而致使它关联的组件得以更新。

    data中对象属性中添加一个新的属性会发生什么?怎么解决?

    值已改变,但是视图没有更新。原因是在Vue实例创建时,新增属性并未声明,因此也就没有被Vue实例转换为响应式的属性,自然就不会触发视图的更新,这时就需要使用Vue的全局api $set
    eg:this.$set(this.obj,'b','value')


    delete和Vue.delete删除数组的区别?

    delete只是使被删除的元素变成empty/undefined,其他元素的键值还是不变
    Vue.delete同时删除了键与值


    Vue实现数据双向绑定的原理

    • 采用数据劫持+发布-订阅者模式实现
    • Object.defineProperty来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应监听回调。

    Vue.use全局注册组件方法

    • Vue.use主要针对有install方法的组件进行全局注册
    • 针对没有install方法的例如axios,无法使用Vue.use,采用添加原型属性的方法进行全局注册
    main.js中注册
    import axios from 'axios'
    Vue.prototype.axios = axios
    
    .vue文件中使用
    this.axios.get('***')
    

    虚拟DOM实现原理

    • 用JS模拟真实DOM树,对真实DOM进行抽象
    • diff 算法 — 比较两棵虚拟 DOM 树的差异
    • pach 算法 — 将两个虚拟 DOM 对象的差异应用到真正的 DOM 树

    服务器端渲染优缺点

    (1)服务端渲染的优点:

    更好的 SEO: 因为 SPA 页面的内容是通过 Ajax 获取,而搜索引擎爬取工具并不会等待 Ajax 异步完成后再抓取页面内容,所以在 SPA 中是抓取不到页面通过 Ajax 获取到的内容;而 SSR 是直接由服务端返回已经渲染好的页面(数据已经包含在页面中),所以搜索引擎爬取工具可以抓取渲染好的页面;
    更快的内容到达时间(首屏加载更快): SPA 会等待所有 Vue 编译后的 js 文件都下载完成后,才开始进行页面的渲染,文件下载等需要一定的时间等,所以首屏渲染需要一定的时间;SSR 直接由服务端渲染好页面直接返回显示,无需等待下载 js 文件及再去渲染等,所以 SSR 有更快的内容到达时间;

    (2) 服务端渲染的缺点:

    更多的开发条件限制: 例如服务端渲染只支持 beforCreate 和 created 两个钩子函数,这会导致一些外部扩展库需要特殊处理,才能在服务端渲染应用程序中运行;并且与可以部署在任何静态文件服务器上的完全静态单页面应用程序 SPA 不同,服务端渲染应用程序,需要处于 Node.js server 运行环境;
    更多的服务器负载:在 Node.js 中渲染完整的应用程序,显然会比仅仅提供静态文件的 server 更加大量占用CPU 资源 (CPU-intensive - CPU 密集),因此如果你预料在高流量环境 ( high traffic ) 下使用,请准备相应的服务器负载,并明智地采用缓存策略。


    Vue中$refs实现原理

  • 相关阅读:
    移动端 提交按钮呗软键盘挤上去的问题解决
    jenkins创建项目API踩坑记
    backstage使用笔记(2)- 跨域代理设置
    backstage使用笔记(1)- 项目的搭建和插件的创建
    什么是强缓存,什么是协商缓存?
    关于antd英文文案切换为中文
    记解决遇到自己电脑看线上项目没问题,别的同事电脑看线上项目有问题的疑难杂症
    vue.js组件传值
    Vue.js组件
    关于Object.keys()和for in的区别
  • 原文地址:https://www.cnblogs.com/nanhuaqiushui/p/11774197.html
Copyright © 2011-2022 走看看