vue相关
1. 生命周期
2 .双向数据绑定v-model。这个最好也是自己实现一下 理解更深
通过v-model
VUE实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的。
// 依赖收集 // 简化版 var obj = { } var name //第一个参数：定义属性的对象。 //第二个参数：要定义或修改的属性的名称。 //第三个参数：将被定义或修改的属性描述符。 Object.defineProperty(obj, "data", { //获取值 get: function () { return name }, //设置值 set: function (val) { name = val console.log(val) } }) //赋值调用set obj.data = 'aaa' //取值调用get console.log(obj.data) // 详细版 myVue.prototype._obverse = function (obj) { // obj = {number: 0} var value; for (key in obj) { //遍历obj对象 if (obj.hasOwnProperty(key)) { value = obj[key]; if (typeof value === 'object') { //如果值是对象，则递归处理 this._obverse(value); } Object.defineProperty(this.$data, key, { //关键 enumerable: true, configurable: true, get: function () { console.log(`获取${value}`); return value; }, set: function (newVal) { console.log(`更新${newVal}`); if (value !== newVal) { value = newVal; } } }) } } }
3.vue父子组件传递参数
- 父 -->子: 通过props
- 子 -->父: 通过 $$refs 或 $emit
4.vue传递参数方法
- 父子组件传参如上, v-bind : v-on @
- 兄弟组件传参:(通过EventBus事件总线实现)
// 1\. 新建eventBus.js import Vue from 'vue' export default new Vue // 或直接在main.js中初始化EventBus(全局) Vue.prototype.$EventBus = new Vue() // 2\. 发射与接收 // 如果是定义在eventBus.js中 import eventBus from 'eventBus.js' eventBus.$emit() eventBus.$on() // 如果是定义在main.js中 this.bus.$emit() this.bus.$on() // 3\. 移除监听 eventBus.$off()
5.vue自定义组件
可以使用独立可复用的自定义组件来构成大型应用, 采用帕斯卡命名法或横线连接, 通过以上方式进行组件间通信. 每一个组件都是Vue实例, 可以使用生命周期钩子.
6. vue自定义指令
- 除核心指令之外的指令, 使用directive进行注册.
- 指令自定义钩子函数: bind, inserted, update, componentUpdated, unbind
7.vuex组成和原理
- 组成: 组件间通信, 通过store实现全局存取
- 修改: 唯一途径, 通过commit一个mutations(同步)或dispatch一个actions(异步)
- 简写: 引入mapState、mapGetters、mapActions
8.vue-router的原理，例如hashhistory和History interface这些东西要弄明白。其实看一下源码就好了，看不懂可以直接看解析的相关技术博客。
-
vue-router用法:
在router.js或者某一个路由分发页面配置path, name, component对应关系- 每个按钮一个value, 在watch功能中使用this.$router.push实现对应跳转, 类似react的this.history.push
- 或直接用router-link to去跳转, 类似react的link to
-
vue-router原理: 通过hash和History interface两种方式实现前端路由
- HashHistory: 利用URL中的hash（“#”）;replace()方法与push()方法不同之处在于，它并不是将新路由添加到浏览器访问历史的栈顶，而是替换掉当前的路由
- History interface: 是浏览器历史记录栈提供的接口，通过back(), forward(), go()等方法，我们可以读取浏览器历史记录栈的信息，进行各种跳转操作. pushState(), replaceState() 这下不仅是读取了，还可以对浏览器历史记录栈进行修改
9.vue的seo问题
seo关系到网站排名, vue搭建spa做前后端分离不好做seo, 可通过其他方法解决:
- SSR服务端渲染: 将同一个组件渲染为服务器端的 HTML 字符串.利于seo且更快.
- vue-meta-info, nuxt, prerender-spa-plugin页面预渲染等
10.预渲染和ssr
以上
11.生命周期内create和mounted的区别
- created: 在模板渲染成html前调用，即通常初始化某些数据，然后再渲染成视图。
- mounted: 在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作和方法。
12.监听watch
对应一个对象，键是观察表达式，值是对应回调。值也可以是methods的方法名，或者是对象，包含选项。在实例化时为每个键调用 $watch()
13.登录验证拦截(通过router)
- 先设置requireAuth:
routes = [ { name: 'detail', path: '/detail', meta: { requireAuth: true } }, { name: 'login', path: '/login' } ]
- 再配置router.beforeEach:
router.beforeEach((from, to, next) => { if (to.meta.requireAuth) { // 判断跳转的路由是否需要登录 if (store.state.token) { // vuex.state判断token是否存在 next() // 已登录 } else { next({ path: '/login', query: {redirect: to.fullPath} // 将跳转的路由path作为参数，登录成功后跳转到该路由 }) } } else { next() } })
14. v-for key值
不写key值会报warning, 和react的array渲染类似. 根据diff算法, 修改数组后, 写key值会复用, 不写会重新生成, 造成性能浪费或某些不必要的错误
15. vue3.0的更新和defineProperty优化
- 放弃 Object.defineProperty ，使用更快的原生 Proxy (访问对象拦截器, 也成代理器)
- 提速, 降低内存使用, Tree-shaking更友好
- 支持IE11等
- 使用Typescript
15. vue使用this获取变量
正常要通过vm.[图片上传失败...(image-6d2f4e-1570591304185)]
root传参取值
16. jQuery的优缺点，与vue的不同，vue的优缺点？
- jq优点: 比原生js更易书写, 封装了很多api, 有丰富的插件库; 缺点: 每次升级与之前版本不兼容, 只能手动开发, 操作DOM很慢, 不方便, 变量名污染, 作用域混淆等.
- vue优缺点: 双向绑定, 虚拟DOM, diff算法, MVVM, 组件化, 通信方便, 路由分发等
17. vue解除双向绑定
let obj = JSON.parse(JSON.stringify(this.temp1));
18. vue异步组件
为了简化，Vue 允许你以一个工厂函数的方式定义你的组件，这个工厂函数会异步解析你的组件定义。Vue 只有在这个组件需要被渲染的时候才会触发该工厂函数，且会把结果缓存起来供未来重渲染
Vue.component( 'async-webpack-example', // 这个 `import` 函数会返回一个 `Promise` 对象。 () => import('./my-async-component') )
19. MVC与MVVM
- model-数据层 view-视图层 controller-控制层
- MVC的目的是实现M和V的分离，单向通信，必须通过C来承上启下
- MVVM中通过VM（vue中的实例化对象）的发布者-订阅者模式实现双向绑定，数据绑定，dom事件监听
- 区别：MVC和MVVM的区别并不是VM完全取代了C，ViewModel存在目的在于抽离Controller中展示的业务逻辑，而不是替代Controller，其它视图操作业务等还是应该放在Controller中实现。也就是说MVVM实现的是业务逻辑组件的重用
20. vue渐进式
小到可以只使用核心功能，比如单文件组件作为一部分嵌入；大到使用整个工程，vue init webpack my-project来构建项目；VUE的核心库及其生态系统也可以满足你的各式需求（core+vuex+vue-route）
