Vue

总结

一、使用vuejs进行开发
1、Vue
0、生命周期函数：（挂载，更新，销毁），
1、beforeCreate（），el和data还没有初始化
2、created（还没渲染成html，但是vue中（data）的实例已经初始化完了），不能直接操作真实dom（el），

        中间还有el挂载，和模板渲染，虚拟dom更换真实dom

   3、mounted  （已完成模板渲染，完成数据挂载，通过render函数获取到真实dom，可以操作真实dom）能获取到dom节点
   4、beforeDestroy  组件销毁之前  ：注意，在这个生命周期函数里，需要把自定义的事件进行解绑，防止内存泄露，事件总线的off
   注意：
      1、初始化的时候先初始化父组件再子组件，
      2、渲染的时候是先渲染子组件再渲染父组件。
0.1、vue的核心是：数据驱动（VM）：通过数据变化直接修改BOM的展示，不用操作DOM
                            组件：把整体拆分成一个个可以复用的个体
       当多个组件中逻辑相同的时候，可以用mixin抽离出来
1、watch属于组件对象的某一个属性，用于监听某一个属性的改变，当变化之后执行业务逻辑，
 注意：（监听data中的属性或者props中传过来的属性值的是否发生变化，名字必须和属性名保持一致，
             有newvalue和oldvalue两个参数，一般用newvalue，一旦值发生变化之后，可以自定义一个事件发生给父组件中进行处理）
         1、watch可以深度监听：deep：true
         2、在监听对象的时候，拿不到oldvalue的值
2、计算属性和watch的区别
   计算属性：会自动监听当前值的变化，如果当前值变化的时候会返回一个回调，
          1、有get和set的方法
   用法：需要动态计算值的话，用计算属性，当需要值的变化之后执行业务逻辑再用watch

3、计算属性和方法的区别：
1、计算属性会缓存数据：会观察计算属性中的元素是否发生变化，如果没有变化的话，就会在直接返回回去，不会再次调用，多加了一层缓存
方法需要多次调用
2、methods是一个函数，可以接受参数，但是计算属性不可以接受参数
4、v-if会直接修改dom树上的节点（是按照条件进行渲染的），
v-show只是给元素加一个css的样式display：none，元素还在dom数上（按照css属性渲染）
5、v-for中的key值，是为了个每个节点都做一个标识，类似于给每条数据加一个索引，提升渲染的性能
拿key和值进行一一对应，更高效的更新虚拟dom，通过diff算法，会让真实dom和虚拟dom进行对比，找到不同的进行替换、修改
注意： v-for 和 v-if不能同时使用，v-for的运算优先级 大于 v-if
6、事件点击（$event）,@click1、event是原生的event对象2、事件会被挂载在当前dom上7、事件总线（可以带参数），可用于不同组件中的事件传递（涉及到了非父子通行），this.$bus.xxx （需要在main中注册原型，事件总线可以用于非父子组件的通信，on/off（接收监听、移出监听）
8、native(监听原生事件)，组件默认是不能监听点击的，如果想要监听组件点击事件，可以通过.native来监听组件根元素的原生事件（<back-top @click.native=“backClick” v-show=“isShowBack” />）
9、ref：（获取当前属性的dom）
1、当给组件设置了ref属性之后，可以通过this.$refs.xxx获取当前组件对象，就可以调用组件中的方法了（this.$refs.scroll.refresh）
2、ref如果绑定在普通的元素中,通过this.$refs.xxx获取到的当前绑定的dom元素（ref="zjw"，this.$refs.zjw）
10、防抖(防止同一函数调用多次，可以判断在一定时间内是否是函数调用)/节流
11、css中属性，所有组件都有属性$el，可以用于获取组件中的元素--divspan，（this.$refs.tabControl2.$el.offsetTop;）12、只有default导出的时候，才可以省略符号13、v-model双向绑定，相当于v-bind（动态绑定）+v-on（事件监听）：0、通过v-bind绑定一个value属性，v-on指令给当前的元素绑定input事件（:value="msg"相当于把msg动态绑定到input中的value值上（v-bind））1、自定义v-model：父组件将v-model属性用在子组件上，就是通过改变子组件中的值来双向修改父组件的值（就是将v-model放在组件上），首先在子组件上定义一个model属性定义一些属性（prop、change），prop的值必须一一对应注意：1、子组件中使用:value来接收值2、子组件中的change和model属性中的change对应3、可以通过event函数获取到input里面输入的value值（event.target.value）2、就是在v-bind（：value(））的基础上，加了一个v-on的改变事件13、this.$nextTick()： 因为vue是异步渲染，dom在改变之后不会立刻渲染，所以在修改数据之后，等待dom渲染之后再回调，就可以获取修改之后的dom节点
用法：vm.msg = ‘cs’ （修改数据）
//dom未更新
this.$nextTice(() => {
//dom更新
})
13、、keep-alive的理解？（缓存组件，频繁渲染，不需要重复渲染的时候使用）
是Vue中的一个内置组件，可以使包含中的组件保留状态，避免重复渲染
13、为什么组件数据data是一个函数？return回去的是一个对象，但是在vue实例中data就是一个对象
因为组件是可以复用的，如果复用了多次组件，如果data是对象的话，对象是没有作用域的概念的，
所有返回的都是公用一块内存空间，改变一个值所有的都改变了
但是函数是有作用域概念的，创建一个函数就会创建一块内存空间，每个内存独立存在，互不干扰，

14、怎么理解单向数据流？
父组件通过props把数组传到子组件中，但是props里的值只能由父组件来修改，子组件不能修改（子组件只能修改data中的值），如果子组件想要修改的时候，
只能自定义一个$emit的事件，父组件接收后，再修改对应的值。注意：如果子组件想要修改父组件传过来的值，有2种办法1、在data中拷贝一份prop的值，子组件可以修改data里的值2、如果是对props值的转换，可以使用计算属性2、Vue-Router--------------------------------------------------------------------------------------------------------1、引入路由，npminstallvue-router--save，1、路由懒加载，2、配置映射关系，3、挂载在vue的实例上2、this.$router 相当于是全局的路由对象，任何页面都可以调用其 push(回退之后可以到上一个页面), replace(不会回退到上个页面), go() 等方法。
1、this.$router.push（），想要导航到不同的URL，这个方法会向history栈添加一个新的记录2、this.$rouer.replease()，不会向history添加新记录，不能回退到上一个页面
3、this.$router.go(n)用于路由跳转，可以向前或向后跳转4、router-link用于路由跳转，（to，replease，actice-class）属性5、router-view用于路由渲染，路由匹配的组件会渲染到router-view里面6、路由跳转的方式，<router-linkto=“”>，this.$router.push()
this.$route相当于当前页面的路由，属于局部对象，可以获取对应的name,path,params,query等属性3、router：1、router-view（router自带的组件,当点击那个路由的时候,会把当前点击中的路由组件中的内容渲染这个页面上,用router-view渲染,还有router-link用来设置路由跳转和一些class属性等）2、router-link默认相当于a标签，tag="button"可以将默认的a标签换成button按钮，active-class="xiaozou"修改class的属性名称（<router-linkto="/home"tag="button"replaceactive-class="xiaozou">首页</router-link>）3、动态路由传参：传递的是一个对象1、----params通过router-link来传递带get参数的,(:to="path{:}^{\prime }/min{e}^{\prime },query:name{:}^{\prime }zj{w}^{\prime },age:18")2、----query通过方法来传递带get参数的,(:to="path{:}^{\prime }/min{e}^{\prime },query:name{:}^{\prime }zj{w}^{\prime },age:18")4、路由跳转的方式？1、<router-linkto="/home">当前标签会转化为a标签2、this.$router.push(’/home’)
3、Vuex ---------------------------------------------------------------------------------------------------------
1、action属性是异步的
2、mutation属性是同步的函数，state的值只有mutation可以更改，通过发送commit事件进行修改state的值
注意：通过commit提交mutation的方式来修改state，而不要直接修改state，否则会报错
3、state：存放的基本的数据，通过this.$store.state.获取值4、getters：类似于计算属性，用于监听state的值是否变化，会缓存数据5、modules：模块化（将store分割成不同的模块）6、页面刷新数据会丢失，可以存到缓存里面注意：1、this.$store.state.redirectPage 获取state的值
2、this.$store.commit(‘orderTab’, index) 修改里面的值

4、Axios ------------------------------------------------------------------------------------------------------------
1、axios的特点？
1、通过node创建 http请求
2、支持Promise的Api
3、可以做拦截器和相应
4、自动转换成json
5、axios中的发送字段的参数是data跟params两个，两者的区别在于params是跟请求地址一起发送的，data的作为一个请求体进行发送
params一般适用于get请求，data一般适用于post put 请求。
6、支持多种的请求方式、get post put delete
2、封装axios？
1、建一个文件来封装axios，再建一个文件统一管理接口的
2、因为项目的开发环境有，开发、测试、生成环境，可以通过node的环境变量来匹配默认的接口请求地址
process.env.NODE_ENV == ‘development’ 、process.env.NODE_ENV == ‘debug’、process.env.NODE_ENV == ‘production’
3、封装请求拦截
4、封装相应拦截
5、post、get、put
3、vue更新数组时触发视图更新的方法，做到响应式
push、pop、shift、unshift、splice、sort、reverse
splice：splice(2,0,‘bb’),从第二位开始，删除0个元素，并插入值，可以插入多个 （删除，插入，替换）都可以使用
4、什么是跨域？（跨域是由浏览器的同源策略造成的，是浏览器对js的安全限制）
1、当一个请求的url的协议、域名、端口号三者之间有任何一个与当前页面的url不同就是跨域
2、如果有一个没有同源策略的浏览器，就不用考虑跨域的问题了。不能跨域也是浏览对于用户安全的考虑
3、常用于客户端和服务端之间的通信
5、什么是同源策略？
1、指的是协议、域名、端口号必须相同
2、同源策略限制了一些不能操作的行为
1、Cookie/LocalStorage/indexDb 无法获取
2、DOM和JS对象无法获取
3、Ajax请求发送不出去
6、怎么才可以跨域？
1、jsonp的方式，需要调用回调方法
2、跨域资源共享CORS（常用）
3、nginx代理跨域
4、h5 新增的可以实现
7、什么是jsonp？
jsonp是服务端和客户端跨端通信的方法，但是只支持get请求，不支持post
注意：
1、浏览器的同源策略把跨域请求都禁止了，但是页面中的

二、MVC&MVVM设计模式与模块化开发流程
1、MVVM：（M对应的是数据，还有网络请求过来的数据,相当于data中的数据，用来保存每个页面的数据），
（V对应的是dom节点，相当于上面的html代码），
（VM对应的是vue实例，通过双向数据绑定将M和V连接起来，就是new Vue出来的vm对象，相当于调度者）
M和V直接不能直接通信，需要通过VM进行通信
VM：的作用（分割了M和V，相当于调度者，用于通信）
1、可以将M（data中的数据）通过matcher语法绑定到V（）里面，
相当于将data中的数据解析然后渲染到页面然后绑定到dom上面
2、会对dom进行监听，当V（）中有一些操作和点击事件的情况下，可以再回调用到M中的方法进行操作dom
M：的作用
1、可以写一些js的代码
2、可以定义一些函数方法methods
注意：MVVM（是前端视图层的分层开发思想，主要是把每个页面分成了M，V，VM, VM是思想核心，用于双向绑定）
0. 开发者不需要关心DOM的更新和修改，只需要在VM中进行逻辑开发就可以，通过VM进行双向绑定，直接修改BOM的显示，不进行dom操作
1. 各部分之间的通信，都是双向的。
2. View 与 Model 不发生联系，都通过 ViewModel 传递。通过双向绑定，
3. ViewModel它采用双向绑定（data-binding）：View的变动，自动反映在 ViewModel，反之亦然
4、双向绑定的特性，数据同步相应

 2、MVC：就是数据、视图、逻辑进行分层，实现解耦（多用于后端开发分层）
       视图（View）：用户界面。
       控制器（Controller）：业务逻辑
       模型（Model）：数据保存
       通信方式：（所有通信都是单向的）
              1、View 传送指令到 Controller
              2、Controller 完成业务逻辑后，要求 Model 改变数据
              3、然后再有control发送给view
              4、模块化，容易复用，层次分明，容易维护