关于vue学习整理

最新推荐文章于 2022-12-28 11:23:55 发布

Lilio1216

最新推荐文章于 2022-12-28 11:23:55 发布

阅读量271

点赞数 1

文章标签： vue js

本文链接：https://blog.csdn.net/var_deng/article/details/104961668

版权

文章目录

一、对于MVVM的理解？

MVVM 是Model - View - ViewModel 的缩写
Model 代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑。
View 代表UI组件，它负责将数据模型转化成UI 展现出来。
ViewModel 监听模型数据的改变和控制视图行为、处理用户交互，ViewModel同步View和Model的工作是完全自动的，不需要人为手动操作Dom（监听数据改变，同步界面）

使用mvvm的好处：低耦合性、模块复用、独立开发、便于调试

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

采用数据劫持结合发布者-订阅者模式，通过Object.defineProperty() 来劫持各个属性的getter/setter，在数据变动时通知订阅者，触发相应的回调。
当把一个对象传给vue实例做它的data时，vue将遍历他的属性，用object.definedProperty(),将他们转为setter/getter, 让vue追踪依赖，在属性被访问和修改时通知变化。实际上就是对原生js实现双向数据绑定的封装。

原生js实现数据双向绑定原理如下：

<body>
    <div id="app">
        <input type="text" id="txt">
        <p id="show"></p>
    </div>
</body>

<script type="text/javascript">
    var obj = {};
    Object.defineProperty(obj, 'txt', {
        get: function () {
            return obj
        },
        set: function (newValue) {
            document.getElementById('txt').value = newValue;
            document.getElementById('show').innerHTML = newValue;
        }
    })
    document.addEventListener('keyup', function (ev) {
        obj.txt = ev.target.value;
    })
</script>

三、Vue 组件间的参数传递

1.父组件与子组件传值

父->子：子组件通过props方法接受数据；
子->父：$emit方法传递参数;

2.兄弟组件传值

EventBus： 事件总线中转站 通过 $e m i t 、$ on传递和接受事件，适合业务逻辑较少的项目
VueX：数据仓库整个项目全局都可以往这个仓库存放数据和读取数据

// event-bus.js
import Vue from 'vue'
export const EventBus = new Vue()
…

//兄弟子组件发送事件
//  DecreaseCount.vue
<template>
    <button @click="decrease()">-</button>
</template>

<script> 
import { EventBus } from "../event-bus.js";
    export default {
        name: "DecreaseCount",
			…
        methods: {
            decrease() {
                EventBus.$emit("decreased", {
                    num:this.num,
                    deg:this.deg
                });
            }
        }
    }; 
</script>

<!-- IncrementCount.vue -->
<template>
    <button @click="increment()">+</button>
</template>

<script> import { EventBus } from "../event-bus.js";
    export default {
        name: "IncrementCount",
       	…
        methods: {
            increment() {
                EventBus.$emit("incremented", {
                    num:this.num,
                    deg:this.deg
                });
            }
        }
    };
 </script>

//接受事件
<script>
    import IncrementCount from "./components/IncrementCount";
    import DecreaseCount from "./components/DecreaseCount";
    import { EventBus } from "./event-bus.js";
    export default {
        name: "App",
        components: {
            IncrementCount,
            DecreaseCount
        },
        …
        mounted() {
            EventBus.$on("incremented", ({num,deg}) => {
                this.fontCount += num
                this.$nextTick(()=>{
                    this.backCount += num
                    this.degValue += deg;
                })
            });
            EventBus.$on("decreased", ({num,deg}) => {
                this.fontCount -= num
                this.$nextTick(()=>{
                    this.backCount -= num
                    this.degValue -= deg;
                })
            });
        }
    }; 
</script>

四、Vue的路由实现：hash模式和 history模式

传统路由：用户访问url时，服务器会接收这个请求，解析url中的路径，执行对应的处理逻辑。
前端路由: 不涉及服务器，前端利用hash或者HTML5的history API来实现.

hash模式：

1、有“#”符号，不美观
2、可用window.location.hash读取，hash虽然在URL中，但不被包括在HTTP请求中，用来指导浏览器动作，对服务端安全无用，hash不会重新加载页面。

history模式：

1、history 采用HTML5的新特性，对低版本浏览器支持性不友好
2、提供了几个个新方法：pushState（）、replaceState（）可以对浏览器历史纪录栈进行修改，但仅仅只是改变history 的记录，并不会刷新、去加载这个URL，popState（）事件监听到状态变更
3、二级页面刷新，报404错误，需要将不存在的路径请求重定向到入口文件

	const state = { 'page_id': 1, 'user_id': 5 }
	const title = ''
	const url = '/mp/knowledge'
	history.pushState(state, title, url);  
	
	window.addEventListener("popstate", function() {
        console.log(url);                                                          
    });

五、 Vue与Angular以及React的区别？

1.与AngularJs的区别

相同点：
1)都支持指令，内置指令和自定义指令；
2)都支持过滤器：内置过滤器和自定义过滤器；
3)都使用双向数据绑定,组件化开发；
4)都有相应的生命周期钩子函数；
5)都支持es6,es5的写法，都不支持IE8 以下低端浏览器；（低版本浏览器内核版本太低，无法解析 ES2015最新的一些语法。）

不同点：
1)AngularJs的学习成本高，比如Dependency、Injecttion特性，而vue.js更简单、易用，便于快速开发；
2)在性能上，AngularJs依赖对数据做脏检查，所以watcher越多越慢；Vue.js使用基于依赖追踪的观察并且使用异步队列更新，所以的数据都是独立触发的。

2. 与React的区别

相同点：
1)都有快速搭建项目的脚手架
2)组件开发中都支持mixins混淆特性
3)都有生命周期的钩子函数
4)数据双向绑定，组件模块化开发
5)都是基于Virtual DOM模型。
6)都有数据状态管理（vuex，redux）
7)都可以使用axios像后台发请求

不同点：
1)监听数据变化的实现原理不同
2)React可扩展性更好,更适合大型的项目的开发
3)Vue更小，更快，更灵活, 易于开发
4)React采用独特的JSX语法

3、vue,angular,react数据双向绑定原理

AngularJS:
采用“脏值检测”的方式，数据发生变更后，对于所有的数据和视图的绑定关系进行检测，识别是否有数据发生了改变，有变化进行处理，可能进一步引发其他数据的改变，所以这个过程可能会循环几次，一直到不再有数据变化发生后，将变更的数据发送到视图，更新页面展现。如果是手动对 ViewModel 的数据进行变更，为确保变更同步到视图，需要手动触发一次“脏值检测”。
VueJS :
采用的是数据劫持结合发布者-订阅者的方式实现双向绑定，数据劫持主要通过 Object.defineProperty 来实现，监控对数据的操作，从而可以自动触发数据同步。并且，由于是在不同的数据上触发同步，可以精确的将变更发送给绑定的视图，而不是对所有的数据都执行一次检测。
React：
采用虚拟DOM树的更新，属性更新，组件自己处理，结构更新，重新“渲染”子树（虚拟DOM），找出最小改动步骤，打包DOM操作，给真实DOM树打补丁单纯从数据绑定来看，React虚拟DOM没有数据绑定，因为setState()不维护上一个状态（状态丢弃）

六、Vue路由的钩子函数

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

七、Vuex是什么？怎么使用？那种功能场景使用？

Vuex: 数据的状态管理器
使用：在main.js引入store，注入。新建一个目录store，目录下面包含actions.js、 mutations.js、 mutation-type.js、 store.js、getters.js等文件，通过export导出。
场景：登录、购物车、兄弟组件之间的通信等全局变量传递

state
Vuex 使用单一状态树，既每个应用将仅仅包含一个store实例，单单一状态树和模块化并不冲突。存放的数据状态，不可以直接修改里面的数据。
mutations
mutations定义的方法动态修改同步store中的状态或数据，view层通过store.commit来触发方法。
getters
类似vue的计算属性，相当于store的计算属性，主要用来过滤一些数据。
action
action可以理解为通过mutations里面处理数据的方法变成可异步的处理数据的方法，简单的说就是异步操作数据，view层通过store.dispath来分配action。
modeules
项目特别复杂的时候，可以让每一个模块拥有自己的state，mutation，action，getters，使得结构非常清晰，方便管理, store的模块化

八、Keep-Alive

keep-alive 是Vue内置的一个组件，用来缓存包含的组件
include( 包含的组件缓存）与exclude(排除的组件不缓存，优先级大于include）

<!-- 逗号分隔字符串，组件a与b不被缓存。 -->
<keep-alive exclude="a,b">
  <component></component>
</keep-alive>
<!-- 正则表达式 (需要使用 v-bind，符合匹配规则的都会被缓存) -->
<keep-alive :include="/a|b/">
  <component></component>
</keep-alive>
<!-- Array (需要使用 v-bind，被包含的都会被缓存) -->
<keep-alive :include="['a', 'b']">
  <component></component>
</keep-alive>

九、computed和watch的使用场景？

computed:

当一个属性受多个属性影响的时候就需要用到computed
示例：购物车商品结算的时候

watch:

当一条数据影响多条数据的时候就需要用watch
示例：搜索数据

十、vue组件中data为什么必须是一个函数？

防止组件的data数据被公用而篡改
data是函数，可以在复用组件时，返回新的data,这样每个组件实例都有自己私有的数据空间，它们只负责各自维护的数据，不会造成混乱。如果公用一个对象的话，一改则全改！

十一、对vue渐进式框架的理解？

之前知乎上有看到一个大牛是这么理解的：

在我看来，渐进式代表的含义是：主张最少。
每个框架都不可避免会有自己的一些特点，从而会对使用者有一定的要求，这些要求就是主张，主张有强有弱，它的强势程度会影响在业务开发中的使用方式。
比如说，Angular，它两个版本都是强主张的，如果你用它，必须接受以下东西：

必须使用它的模块机制- 必须使用它的依赖注入- 必须使用它的特殊形式定义组件（这一点每个视图框架都有，难以避免）

所以Angular是带有比较强的排它性的，如果你的应用不是从头开始，而是要不断考虑是否跟其他东西集成，这些主张会带来一些困扰。

比如React，它也有一定程度的主张，它的主张主要是函数式编程的理念，比如说，你需要知道什么是副作用，什么是纯函数，如何隔离副作用。它的侵入性看似没有Angular那么强，主要因为它是软性侵入。

Vue可能有些方面是不如React，不如Angular，但它是渐进的，没有强主张，你可以在原有大系统的上面，把一两个组件改用它实现，当jQuery用；也可以整个用它全家桶开发，当Angular用；还可以用它的视图，搭配你自己设计的整个下层用。你可以在底层数据逻辑的地方用OO和设计模式的那套理念，也可以函数式，都可以，它只是个轻量视图而已，只做了自己该做的事，没有做不该做的事，仅此而已。
渐进式的含义，我的理解是：没有多做职责之外的事。

vue渐进式框架在对比react和angular框架时，会更易理解，
angular: 主张比较强，要求开发者必须使用它的模块机制、依赖注入，具有很强的排他性
react: 主张函数式编程理念，属于软性侵入

vue 相比于前2者，虽然某些方面不足，但它更轻量、灵活，外部依赖最小化，功能实现最大化，没有强主张，可以根据业务需要再逐步扩展。

十二、单页面应用和多页面应用区别

单页：一个项目中所有页面在嵌套在一个主页内，通过动态路由的变化来切换主页的片段，页面跳转只刷新局部资源，用户体验较好。但因为页面渲染的实质是通过js插入的，所以不利于seo搜索引擎的收录，且具有首页加载慢的缺点，更适用于后端管理类项目。

多页：一个项目，由多个独立的页面组成。页面刷新，则整页刷新，一般通过操作dom树，来变更视图。数据交互操作麻烦，但对低版本浏览器兼容性更好。

十三、单页应用首屏加载慢如何解决

1、vue-router 路由懒加载, 在用户访问某个页面时才加载对应页面，节省首次加载的时间
2、使用CDN方式去引入import需要导入的库，然后在build/webpack.base.conf.js文件中配置externals，从打包的bundle文件中排除依赖，减轻vendor.js的负担
3、避免非全局使用的插件在main.js中引用
4、压缩文件，去掉map文件、关闭devtools调试工具
5、安装 webpack-bundle-analyzer插件查看文件大小，进行针对性优化
6 、异步加载组件 vue异步组件使用
7 、换成服务端渲染，如nuxt.js等

补充1：webpack-bundle-analyzer的安装使用流程如下：

// 1. 安装
cnpm install webpack-bundle-analyzer --save-dev

// 2. 在/build/webpack.prod.conf.js文件中引入
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
// 然后配置一下：
plugins: [
    new BundleAnalyzerPlugin()
]

// 3. 在package.json文件中配置：
"scripts": {
    "analyz": "NODE_ENV=production npm_config_report=true npm run build"
}

// 4. 运行（会自动在浏览器打开：http://127.0.0.1:8888/）
npm run build

补充2：解释一下CDN（Content Delivery Network）：内容分发网络
CDN可以把原服务器上数据复制到其他服务器上，用户访问时，服务器会就近分发网络数据。
CDN加速优点是成本低，速度快。适合访问量比较大的网站

十四、assets和static的区别

共同点：都是用来存放静态文件的文件夹
不同点：是否走打包流程
assets：是/src文件夹子文件夹，执行打包命名时（npm run build），会被同步打包，既：assets下的静态资源会被压缩处理后，放入/static文件内，同index.html文件一起部署到服务器。所以，一般用来放自己写的组件所需要的静态资源。
static：与/src文件夹同级，不会被打包压缩，一般用来放一些已被压缩处理过的第3方插件的静态资源。

其它

1、vue-loader

vue的加载器，集成vue-loader后，可以支持es6语法、动态预编译样式less、sass，jade、vue模板编译等

2、v-modal

v-model用于表单数据的双向绑定，其实它就是一个语法糖，
v-bind绑定一个value属性；
v-on指令给当前元素绑定input事件。

3、v-on可以监听多个方法

写法如： <input type=“text” v-on="{ input:onInput,focus:onFocus,blur:onBlur, }">

4、$nextTick

data值渲染更新到dom元素之后在获取

5、mixins

6、slot

可以理解为：父组件在子组件内占的一块区域，父组件可以自定义DOM元素去替换这个区域
slot负责分发，name相同的slot对应替换

7、router-link

vue的路由元素，相当于html中的a标签
可以通过安装babel polypill插件，解决安卓上点击失效的问题
可以通过Router.navigate方法，解决IE和Firefox中不起作用（路由不跳转）的问题
可以通过@click.native，解决注册在router-link上click事件无效的问题
因为默认router-link会阻止click事件，.native指直接监听一个原生事件

8、v-cloak 指令

v-cloak 指令是解决屏幕出现闪动

以上内容部分来源于网络，侵权删，如有错误，欢迎指出！

Lilio1216

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
关于vue学习整理

一、对于MVVM的理解？MVVM 是Model - View - ViewModel 的缩写Model 代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑。View 代表UI组件，它负责将数据模型转化成UI 展现出来。ViewModel 监听模型数据的改变和控制视图行为、处理用户交互，ViewModel同步View和Model的工作是完全自动的，不需要人为手动操作Dom（监听数...
复制链接

扫一扫