vue 的一些知识点

1.vue脚手架和数据双向绑定，如何搭建脚手架，双向数据绑定原理

• vue脚手架指的是vue-cli，它是一个专门为单页面应用快速搭建繁杂的脚手架，它可以轻松的创建新的应用程序而且可用于自动生成vue和webpack的项目模板。
• 如何搭建脚手架：在命令行窗口输入vue ui ，按下回车后会自动在浏览器中打开图形化界面，然后按照需要进行下面操作。
• 双向绑定，指的是vue实例中的data与其渲染的DOM元素的内容保持一致，无论谁被改变，另一方会相应的更新为相同的数据。 这是通过设置属性访问器实现的。 v-model主要用在表单的input输入框，完成视图和数据的双向绑定。
• Vue实现双向数据绑定是采用数据劫持和发布者-订阅者模式。数据劫持是利用ES5的Object.defineProperty(obj,key,val)方法来劫持每个属性的getter和setter，在数据变动时发布消息给订阅者，从而触发相应的回调来更新视图

2. vue的项目结构，有哪些目录，存放那些文件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1ssjbTHw-1627982594449)(https://res-static.hc-cdn.cn/fms/img/ef9549e4007ae12bf4e7d04ada3c9c6e1603445302799)]

5. vue的生命周期，生命钩子函数

• Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期
• Vue 实例在被创建时，会经过一系列的初始化过程，初始化过程中会运行一些函数，叫做生命周期钩子函数，通过运用钩子函数，用户在可以在Vue实例初始化的不同阶段添加自己的代码，以此来实现自己想做的事情。

函数名称	版本	说明
beforeCreate	2.0+	vue实例创建初始化后，数据观测 (data observer) 和event/watch事件配置之前触发
created	2.0+	在实例创建完成后被立即调用，此时实例已完成数据观测 (data observer)，属性方法的运算，watch/event 事件回调的配置。然而，挂载阶段还没开始，$el 属性目前不可见
beforeMount	2.0+	实例挂载开始之前被调用， render 函数首次被调用，该钩子在服务器端渲染期间不被调用
mounted	2.0+	实例已挂载。mounted 不会承诺所有的子组件也都一起被挂载，如果你希望等到整个视图都渲染完毕再进行一些操作，请用 vm.$nextTick：mounted: function () {this.$nextTick(function () { // Code that will run only after the entire view has been rendered })}该钩子在服务器端渲染期间不被调用
beforeUpdate	2.0+	数据更新时调用，发生在虚拟 DOM 打补丁之前，这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器，该钩子在服务器端渲染期间不被调用，因为只有初次渲染会在服务端进行
updated	2.0+	数据更改会导致虚拟 DOM 重新渲染和打补丁，在这之后会调用updated钩子。updated 不会承诺所有的子组件也都一起被重绘。如果你希望等到整个视图都重绘完毕，请用 vm.$nextTick ：updated: function () {this.$nextTick(function () { // Code that will run only after the entire view has been re-rendere})} updated钩子被调用时，组件 DOM 已经更新，你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改实例中的状态属性，如果要相应状态改变，通常最好使用计算属性或 watcher
beforeDestroy	2.0+	实例销毁之前调用。在这一步，实例仍然完全可用，该钩子在服务器端渲染期间不被调用
destroyed	2.0+	Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会接触绑定，所有的事件监听器会被移除，所有的子实例也会被销毁，该钩子在服务器端渲染期间不被调用
activated	2.0+	当某个组件使用了keep-alive组件缓存时，该组件激活时调用activated钩子，该钩子在服务器端渲染期间不被调用
deactivated	2.0+	当某个组件使用了keep-alive组件缓存时，该组件停用时调用deactivated钩子，该钩子在服务器端渲染期间不被调用
errorCaptured	2.5.0+	当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播

6 vuex是什么，原理，使用场景

• Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension (opens new window)，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能
• 使用原理：Vuex是通过全局注入store对象，来实现组件间的状态共享。在大型复杂的项目中（多级组件嵌套），需要实现一个组件更改某个数据，多个组件自动获取更改后的数据进行业务逻辑处理，这时候使用vuex比较合适。假如只是多个组件间传递数据，使用vuex未免有点大材小用，其实只用使用组件间常用的通信方法即可。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cMzyRzfo-1627982594451)(https://img2020.cnblogs.com/blog/2031807/202006/2031807-20200626102551250-47961652.png)]

• 使用场景：vuex 一般用于中大型 web 单页应用中对应用的状态进行管理，对于一些组件间关系较为简单的小型应用，使用 vuex 的必要性不是很大，因为完全可以用组件 prop 属性或者事件来完成父子组件之间的通信，vuex 更多地用于解决跨组件通信以及作为数据中心集中式存储数据。

7. vue的路由及组件，如何定义动态路由，如何获取传来的动态参数

• 这里的路由就是SPA（单页应用）的路径管理器。再通俗的说，vue-router就是WebApp的链接路径管理系统。
  vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。路由模块的本质 就是建立起url和页面之间的映射关系。

• 定义动态路由：前端这边把路由写好，登录的时候根据用户的角色权限来动态展示路由，(前端控制路由)

  后台传来当前用户对应权限的路由表，前端通过调接口拿到后处理(后端处理路由)

• 获取参数：

  ①用name传递参数

  在路由文件src/router/index.js里配置name属性

  routes: [
      {
        path: '/',
        name: 'Hello',
        component: Hello
      }
  ]
  复制代码
  

  模板里(src/App.vue)用$router.name来接收
  比如：<p>{{ $router.name}}</p>

  ②通过<router-link> 标签中的to传参

  这种传参方法的基本语法：

  <router-link :to="{name:xxx,params:{key:value}}">valueString</router-link>
  

  比如先在src/App.vue文件中

  <router-link :to="{name:'hi1',params:{username:'jspang'，id:'555'}}">Hi页面1</router-link>
  

  然后把src/router/index.js文件里给hi1配置的路由起个name,就叫hi1.

  {path:'/hi1',name:'hi1',component:Hi1}
  

  最后在模板里(src/components/Hi1.vue)用$route.params.username进行接收.

  {{$route.params.username}}-{{$route.params.id}}
  

  ③vue-router 利用url传递参数----在配置文件里以冒号的形式设置参数。

  我们在/src/router/index.js文件里配置路由

  {
      path:'/params/:newsId/:newsTitle',
      component:Params
  }
  复制代码
  

  我们需要传递参数是新闻ID（newsId）和新闻标题（newsTitle）.所以我们在路由配置文件里制定了这两个值。 在src/components目录下建立我们params.vue组件，也可以说是页面。我们在页面里输出了url传递的的新闻ID和新闻标题。

  <template>
      <div>
          <h2>{{ msg }}</h2>
          <p>新闻ID：{{ $route.params.newsId}}</p>
          <p>新闻标题：{{ $route.params.newsTitle}}</p>
      </div>
  </template>
  <script>
  export default {
    name: 'params',
    data () {
      return {
        msg: 'params page'
      }
    }
  }
  </script>
  复制代码
  

  在App.vue文件里加入我们的<router-view>标签。这时候我们可以直接利用url传值了

  <router-link to="/params/198/jspang website is very good">params</router-link>|

8 使用vue watch监听对象属性变化

10 vue如何与后台进行数据交互，写出vue中post和get请求的关键要素

• 使用工具axios在前后端框架之间进行数据传输，采用Restful风格，数据格式是json

11. json数据如何转换为vue对象，如何显示在页面对应的值域中

13. MVVM 和MVC区别

• MVC 是一种使用 MVC（Model View Controller 模型-视图-控制器）设计创建 Web 应用程序的模式
• MVVM 源自于经典的 MVC（Model-View-Controller）模式。MVVM 的核心是 ViewModel 层，负责转 换 Model 中的数据对象来让数据变得更容易管理和使用，其作用如下： 该层向上与视图层进行双向数据绑定 向下与 Model 层通过接口请求进行数据交互

15 jQuery的选择器

元素选择器 #id 选择器 .class 选择器

20 浏览器的内核

• 浏览器内核也可以理解为排版引擎，主要由2部分组成，渲染引擎和 JS 引擎

• 浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同，常见的内核有Trident、 Gecko、 Webkit、 Presto、 Blink五种

  Trident

  代表作品是IE，俗称IE内核；使用IE内核的浏览器包括、傲游、世界之窗、百度浏览器、兼容模式的浏览器等

  WebKit内核

  代表作品是Safari、旧版的Chrome

  Presto内核

  代表作品是Opera，Presto是由Opera Software开发的浏览器排版引擎，它是世界公认最快的渲染速度的引擎。在13年之后，Opera宣布加入谷歌阵营，弃用了 Presto

  Blink内核

  代表作品是Chrome、Opera；由Google和Opera Software开发的浏览器排版引擎

  Gecko内核

  代表作品是Firefox，俗称Firefox内核

  Chromium内核

  这个比较特殊，Chromium是谷歌的开源项目是一款浏览器，Chrome 是Chromium的稳定版。国内的大部分双核浏览器都采用Chromium内核

23 浏览器跨域问题

1、 通过jsonp跨域
2、 document.domain + iframe跨域
3、 location.hash + iframe
4、 window.name + iframe跨域
5、 postMessage跨域
6、 跨域资源共享（CORS）
7、 nginx代理跨域
8、 nodejs中间件代理跨域
9、 WebSocket协议跨域