vue相关

/**

• 1、vue的双向数据绑定、mvvm

• 实现mvvm的双向绑定，通过Object.defineProperty()来劫持各个属性的setter，getter。

• Vue 的响应式原理是核心是通过 ES5 的保护对象的 Object.defindeProperty 中的访问器属性中的 get 和 set 方法，
  data 中声明的属性都被添加了访问器属性，当读取 data 中的数据时自动调用 get 方法，当修改 data 中的数据时，自动调用 set 方法，检测到数据的变化，
  会通知观察者 Wacher，观察者 Wacher自动触发重新render 当前组件（子组件不会重新渲染）,生成新的虚拟 DOM 树，
  Vue 框架会遍历并对比新虚拟 DOM 树和旧虚拟 DOM 树中每个节点的差别，并记录下来，最后，加载操作，将所有记录的不同点，局部修改到真实 DOM 树上。
  data - view 数据和视图

• 更具体的理解 ：
  利用 Object.defineProperty 进行 数据劫持 同时结合观察者模式（发布 / 订阅模式）来实现数据双向绑定，这也是 vue 响应式原理的核心。

• 什么是 Vue 响应式 ？
  当视图模型（VM）中的数据模型（M）发生改变时， 视图（V）就会进行更新。

vue 双向数据绑定
是通过 object.defineProperty(object,‘属性名’, {set(() => {}), get(() => {})}) 数据劫持模式
get set两个属性绑定在对象的属性上 用来修改视图
核心原理是 mvvm
数据层修改 – 视图层修改
视图层修改 – 数据层修改
通过viewModel进行双向数据修改

表单的双向数据绑定 语法糖v-model 表单 input、textarea以及select元素上创建双向数据绑定； 原理mvvm

单向数据流 数据层更新视图层 举例 父组件传值给子组件，子组件不能直接修改父组件的值。

• 2、computed和watch区别
  computed也就是计算属性，它可以帮助我们将在模板中的一些稍微复杂的逻辑计算放回到js代码中，方便理解与修改维护；
  在computed中定义的每一个计算属性，都会被缓存起来，只有当计算属性里面依赖的一个或多个属性变化了，才会重新计算当前计算属性的值。

  watch是属性监听器，一般用来监听属性的变化（也可以用来监听计算属性函数），并做一些逻辑。

  computed和watch的使用场景并不一样，computed的话是通过几个数据的变化，来影响一个数据，而watch，则是可以一个数据的变化，去影响多个数据。

• 3、v-model
  v-model只是语法糖而已；真正的实现靠的还是
  ① v-bind:绑定响应式数据
  ② 触发 input 事件 并传递数据 (核心和重点) 自动监听 input 事件,
  并把这个input事件所携带的值 传递给v-model所绑定的属性!这样组件内部的值就给到了父组件了

  如何利用v-model实现自定义的表单组件:
  监听原生组件的事件,当获取到原生组件的值后把 值通过调用 $emit(‘input’ ,data) 方法去触发 input事件

• 4、vuex
  vuex中有四个属性值：state、getters、mutations、actions。
  数据：state --> data 用于保存所有组件的公共数据
  获取数据：getters --> computed 返回值会根据依赖缓存起来，依赖值发生改变才会被重新计算
  更改数据：mutations --> methods 保存着更改数据的回调函数。第一个参数是 state，第二个参数是自定义参数。必须是同步函数 使用store.commit 调用
  视图通过点击事件，触发mutations中方法，可以更改state中的数据，一旦state数据发生更改，getters把数据反映到视图。
  action 提交的是mutation而不是直接变更状态。可以包含任何异步操作，action中的方法需要使用store.dispatch调用

  在vue例子中，我们触发的click事件，就能触发methods中的方法，这是vue设计好的。
  而在vuex中则不行了，一定要有个东西来触发才行，就相当于自定义事件on，emit。vuex中的action，mulation通过on自定义的方法，相应的需要emit来触发。

  他们的关系是这样的： 通过dispatch可以触发actions中的方法，actions中的commit可以触发mulations中的方法。

  一、核心原理
  Vuex本质是一个对象
  Vuex对象有两个属性，一个是install方法，一个是Store这个类
  install方法的作用是将store这个实例挂载到所有的组件上，注意是同一个store实例。
  Store这个类拥有commit，dispatch这些方法，Store类里将用户传入的state包装成data，作为new Vue的参数，从而实现了state 值的响应式。

• 5、webpack
  Webpack是一个模块打包器
  通过loader转换文件，通过plugin注入钩子，最后输出有多个模块组合成的文件
  WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到Js模块以及其它的一些浏览器不能直接运行的拓展语言，并将其打包为合适的格式以供浏览器使用

  优点：
  　　1）专注于处理模块化的项目，能做到开箱即用，一步到位
  　　2）可通过plugin扩展，方便、灵活　　
  　　3）社区庞大活跃，经常引入新特性
  　　4）良好的开发体验
  　　webpack的缺点是只能用于采用模块化开发的项目

  webpack构建过程:
  　　从entry里配置的module开始递归解析entry依赖的所有module
  　　每找到一个module，就会根据配置的loader去找对应的转换规则
  　　对module进行转换后，再解析出当前module依赖的module
  　　这些模块会以entry为单位分组，一个entry和其所有依赖的module被分到一个组Chunk
  　　最后webpack会把所有Chunk转换成文件输出
  　　在整个流程中webpack会在恰当的时机执行plugin里定义的逻辑

  webpack如何配置单页面和多页面的应用程序？
  //单个页面
  module.exports = {
  entry: ‘./path/to/my/entry/file.js’
  }
  //多页面应用程序
  module.entrys = {
  entry: {
  pageOne: ‘./src/pageOne/index.js’,
  pageTwo: ‘./src/pageTwo/index.js’
  }
  }

• 6、es6
  ①promise
  Promise 是异步编程的一种解决方案，Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。
  局限性：
  首先，无法取消Promise，一旦新建它就会立即执行，无法中途取消。
  其次，如果不设置回调函数，Promise内部抛出的错误，不会反应到外部。
  第三，当处于pending状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）。
  当接收到一个代表错误的 HTTP 状态码时，从 fetch() 返回的 Promise 不会被标记为 reject， 即使响应的 HTTP 状态码是 404 或 500。相反，它会将 Promise 状态标记为 resolve （但是会将 resolve 的返回值的 ok 属性设置为 false ），仅当网络故障时或请求被阻止时，才会标记为 reject。
  ②变量
  var // 重复声明，函数级
  let // 不能重复声明，块级，变量
  const // 不能重复声明，块级，常量
  ③箭头函数
  // a.简写
  // ()=>{}
  // i. 如果只有一个参数，()可以省略
  // ii. 如果只有一个return, {}也可以省略
  // b.修正this
  ④数组方法
  map() // 映射
  reduce() // 汇总
  filter() // 过滤
  forEach() // 循环

• 7、diff
  新节点比较旧节点，一边比较一边给真实的DOM打补丁

• 8、vue组件传值
  父传子 - :bind传递，props接收
  子传父 - $emit传递，@绑定接收
  兄弟传值 - 定义公共的父组件建立关系传递 / vuex

• 9、路由跳转
  第一种：router-link（声明式路由） 表示目标路由的链接
  第二种：router.push()（编程式路由） 这个方法会向 history 栈添加一个新的记录
  第三种：router.replace()（编程式路由）跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。
  第四种：router.go(n) 意思是在 history 记录中向前或者后退多少步

• 10、keep-alive
  keep-alive用于保存组件的渲染状态。
  ①原理：
  Vue 的缓存机制并不是直接存储 DOM 结构，而是将 DOM 节点抽象成了一个个 VNode节点。
  因此，Vue 的 keep-alive 缓存也是基于 VNode节点 而不是直接存储 DOM 节点。
  ②参数：
  　　 Keep-alive 组件提供了 include 和 exclude 两个属性，允许组件有条件的进行缓存。
  　　 include: 字符串或正则表达式。只有匹配的组件会被缓存。
  　　 exclude: 字符串或正则表达式。任何匹配的组件都不会被缓存。
  ③生命钩子函数（如果不使用 keep-alive，生命钩子函数不存在）：
  　　 Keep-alive 组件提供了两个生命钩子函数，分别是 activated 和 deactivated 。
  　　 activated ：当页面存在缓存的时候执行该函数。
  　　 deactivated ：在页面结束时触发该方法，可清除掉滚动方法等缓存。

• 11、vue-router导航钩子
  首页可以控制导航跳转，beforeEach，afterEach等，一般用于页面title的修改。一些需要登录才能调整页面的重定向功能。
  beforeEach主要有3个参数to，from，next：
  to：route即将进入的目标路由对象，
  from：route当前导航正要离开的路由
  next：function一定要调用该方法resolve这个钩子。执行效果依赖next方法的调用参数。可以控制网页的跳转。

• 12、为什么避免 v-if 和 v-for 一起用？
  当 Vue 处理指令时，v-for 比 v-if 具有更高的优先级，通过v-if 移动到容器元素，不会再重复遍历列表中的每个值。取而代之的是，只检查它一次，且不会在 v-if 为否的时候运算 v-for。

• 13、localStorage和sessionStorage
  localStorage 除非被清除，否则永久保存
  sessionStorage 仅在当前会话下有效，关闭页面或浏览器后被清除
  localStorage和sessionStorage都具有相同的操作方法，例如setItem、getItem和removeItem等

• 14、threejs
  ①.引入库文件
  
  ②.实例化
  …
  var camera = …
  var secen = …
  var renderer = …
  …

     var transformControls = new THREE.TransformControls(camera, renderer.domElement);
  
     scene.add(transformControls);
   ③.去创建一个cube试试吧
  

*/