目录
2、Vue初始化过程中(new Vue(options))都做了什么?
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
Vue有很多特点和Web开发中常见的高级功能
- 解耦视图和数据
- 可复用的组件
- 前端路由技术
- 状态管理
- 虚拟DOM
一、安装
1、安装Node.js 环境
Node.,js是一个基于Chrom e V8引擎的JavaScript运行环境,它可以让JavaScrpt运行在服务器端。接下来我们就对Node.s的下载和安装进行详细讲解。
(1)打开Node.js官方网站,找到Node.js下载地址
从图1-6中可以看出,Node.js有两个版本。LTS(Long Tem Support是提供长期支持的版本,只进行微小的Bug修复且版本稳定,因此有很多用户在使用;Curent是当前发布的最新版本,增加了一些新特性,有利于进行新技术的开发使用。这里选择LTS版本进行下载即可。
下载后双击进行安装,然后查看安装成功否。
方式一︰直接CDN引入
你可以选择引入开发环境版本还是生产环境版本
<! --开发环境版本,包含了有帮助的命令行警告-->
<script src="https : / /cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><!--生产环境版本,优化了尺寸和速度-->
<script src="https: // cdn.jsdelivr.net/npm/vue"></script>
方式二∶下载和引入
开发环境
https: //vuejs.org/js/vue.js
生产环境
https: //vuejs.org/js/vue.min.js
方式三:NPM安装
后续通过webpack和CLI的使用,我们使用该方式。
选择方式一体验一下,创建一个.html文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>vue</title>
</head>
<body>
<div id="app">{{message}}</div>
<div>{{message}}</div>
<h1>{{message}}</h1>
<!--不显示,这样子写的好处就是数据与代码分离,更改数据不影响界面-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
//let(变量) /const(常量)
//编程范式:声明式编程
const app = new Vue({
el: '#app', //用于挂载要管理的元素
data: { //定义数据
message: '你好啊!小世界!'
}
})
//元素js的做法 编程范式:(命令式编程)
//1.创建div元素,设置id属性
// 2.定义一个变量叫message
//3.将message变量放在前面的div元素中显示
//4.修改message的数据:今天天气不错!
</script>
</body>
</html>
什么是响应式:当数据发生改变时,界面会跟随改变。
小练习二:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>vue</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in movies">{{item}}</li>
</ul>
{{movies}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app', //用于挂载要管理的元素
data: { //定义数据
message: '你好啊!',
movies:['甄嬛传','如懿传','陆贞传奇','哪吒','狼者']
}
})
</script>
</body>
</html>
成功遍历数组元素。
练习三:记数器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>vue</title>
</head>
<body>
<div id="app">
<h2>当前计数:{{counter}}</h2>
<button @click="increment">+</button>
<button @click="decrement">-</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
let app = new Vue({
el: '#app', //用于挂载要管理的元素
data: { //定义数据
counter: 0
},
methods:{
increment(){
this.counter++
},
decrement() {
this.counter--
}
}
})
</script>
</body>
</html>
新的指令:@click, 该指令用于监听某个元素的点击事件,并且需要指定当发生点击时,执行的方法(方法通常是methods中定义的方法)
二、Vue中的MVVM
MVVM - 中文维基百科【维基百科中文版网站】 (gaogevip.com)
MVVM主要包含三部分,分别是Model ,view和ViewModel。Model指的是数据部分,主要负责业务数据;View指的是视图部分,即DOM元素,负责视图的处理。ViewModel是连接视图与数据的数据模型,负责监听Model或者View修改。
在MVVM中,数据(Model)和视图(View)是不能直接通信的,视图模型(ViewModel)就相当于一个观察者,监视着双方的动作,并及时通知进行相应的操作。当Model发生变化的时候,ViewModel能够监听到这种变化是,ViewModel监听到变化后,通知Model进行修改,实现了视图与模型的互相解耦。
三、Vue的优势
目前市场三大前端主流框架分别是Angular、React和Vue。Vue之所以被开发者青睐,主要是秉承了Angular和React框架两者的优势,并且Vuedaima 简介、上手容易,在市场上也得到大量应用。
1、轻量级
2、数据绑定
3、指令
指令主要包括内置指令和自定义指令,以“v-”开头,作用于HTML元素。指令提供了一些特殊的特性,将指令绑定在元素上时,指令会给绑定的元素添加一些特殊的行为。例如:v-bind动态绑定指令、v-if条件渲染指令、v-for列表渲染指令等。
4、插件
四、webpack打包工具
![](https://i-blog.csdnimg.cn/blog_migrate/5fd70136d427d13bfea4f4ac3cb6e99f.png)
![](https://i-blog.csdnimg.cn/blog_migrate/c92a027a8aa3955d956809b2b0e30745.png)
五、浏览器和vue-devtools扩展
vue-devtooks是一款基于Chrom e浏览器的扩展,用于调试Vue应用,只需下载官方压缩包,配置Chrom e浏览器的扩展程序即可使用。下面我们简单介绍一下安装流程。
(1)下载vue-dev tools-5.1.1.zp压缩包到本地。
(2)将压缩包进行解压,然后在命令行中切换到解压好的vue-devtooks-5.1.1目录,输入以下命令进行依赖安装:
npm instal
(3)构建vue-dev tools工具插件,执行命令如下:npm run build
(4)将插件添加至chtome浏览器。单击浏览器地址栏右边的“:”按钮,在弹出的菜单中选择“更多工具”→“扩展程序”,
单击“加载已解压的扩展程序”按钮,此时会弹出选择框,需要用户选择扩展程序目录。找到vue-devtos-5.1.1/helkschiome目录,将其添加到扩展程序中。(5)配置完成后,可以看到当前vue-devtooks工具的信息,并在Chiom e浏览器窗口的右上角会显示Vue的标识
六、创建Vue实例传入的options
详细解析: ![](https://i-blog.csdnimg.cn/blog_migrate/7fae220b3ee34e25270730580498de7c.png)
七、面试题扩展:
主要应用该博主的内容:酒醉提笔思故人
1、Vue的优点
- 轻量级框架:只关注视图层,是一个构建数据的视图集合,大小只有几十 kb ;
- 简单易学:国人开发,中文文档,不存在语言障碍 ,易于理解和学习;
- 双向数据绑定:保留了 angular 的特点,在数据操作方面更为简单;
- 组件化:保留了 react 的优点,实现了 html 的封装和重用,在构建单页面应用方面有着独特的优势;
- 视图,数据,结构分离:使数据的更改更为简单,不需要进行逻辑代码的修改,只需要操作数据就能完成相关操作;
- 虚拟DOM:dom 操作是非常耗费性能的, 不再使用原生的 dom 操作节点,极大解放 dom 操作,但具体操作的还是 dom 不过是换了另一种方式;
- 运行速度更快:相比较于 react 而言,同样是操作虚拟 dom ,就性能而言, vue 存在很大的优势。
2、Vue初始化过程中(new Vue(options))都做了什么?
- 处理组件配置项;初始化根组件时进行了选项合并操作,将全局配置合并到根组件的局部配置上;初始化每个子组件时做了一些性能优化,将组件配置对象上的一些深层次属性放到 vm.$options 选项中,以提高代码的执行效率;
- 初始化组件实例的关系属性,比如 p a r e n t 、 parent、parent、children、r o o t 、 root、root、refs 等
- 处理自定义事件
- 调用 beforeCreate 钩子函数
- 初始化组件的 inject 配置项,得到 ret[key] = val 形式的配置对象,然后对该配置对象进行响应式处理,并代理每个 key 到 vm 实例上
- 数据响应式,处理 props、methods、data、computed、watch 等选项
- 解析组件配置项上的 provide 对象,将其挂载到 vm._provided 属性上
- 调用 created 钩子函数
- 如果发现配置项上有 el 选项,则自动调用 $mount 方法,也就是说有了 el 选项,就不需要再手动调用 $mount 方法,反之,没提供 el 选项则必须调用 $mount
接下来则进入挂载阶段
// core/instance/init.js
export function initMixin (Vue: Class<Component>) {
Vue.prototype._init = function (options?: Object) {
const vm: Component = this
vm._uid = uid++
// 如果是Vue的实例,则不需要被observe
vm._isVue = true
if (options && options._isComponent) {
// optimize internal component instantiation
// since dynamic options merging is pretty slow, and none of the
// internal component options needs special treatment.
initInternalComponent(vm, options)
} else {
vm.$options = mergeOptions(
resolveConstructorOptions(vm.constructor),
options || {},
vm
)
}
if (process.env.NODE_ENV !== 'production') {
initProxy(vm)
} else {
vm._renderProxy = vm
}
vm._self = vm
initLifecycle(vm)
initEvents(vm)
callHook(vm, 'beforeCreate')
initInjections(vm) // resolve injections before data/props
initState(vm)
initProvide(vm) // resolve provide after data/props
callHook(vm, 'created')
if (vm.$options.el) {
vm.$mount(vm.$options.el)
}
}
}
3、对MVVM的理解?
MVVM 由 Model、View、ViewModel 三部分构成,Model 层代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑;View 代表UI 组件,它负责将数据模型转化成UI 展现出来;ViewModel 是一个同步View 和 Model的对象。
在MVVM架构下,View 和 Model 之间并没有直接的联系,而是通过ViewModel进行交互,Model 和 ViewModel 之间的交互是双向的, 因此View 数据的变化会同步到Model中,而Model 数据的变化也会立即反应到View 上。
ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来,而View 和 Model 之间的同步工作完全是自动的,无需人为干涉,因此开发者只需关注业务逻辑,不需要手动操作DOM, 不需要关注数据状态的同步问题,复杂的数据状态维护完全由 MVVM 来统一管理。
4、vue 和 react 区别
相同:
1、都使用vdom;
2、都提供了响应式和组件化的视图组件;
3、核心都在UI层(比如路由,状态管理,数据请求交给其他库);
4、都是单向数据流;
5、轻量级
不同:
1、vue 基于 html 的模板语法,react 是 jsx 语法,可以 html 和 js 混写;
2、状态管理 vue 是 data,react 是 state 但是不能直接修改 state,需要 setState 方法;
3、vue 使用 solt 插槽进行嵌套传递,react 使用 props.children 传递;
4、vue 使用指令渲染,react 逻辑运算符;
5、父子组件传值,vue 使用 props 和 $emit,react 使用 props 和子组件触发父组件的方法,父组件通过setState修改;
6、路由,vue 路由组件都会渲染到 router-view 里面,react 是全局组件的方式,子组件作为 children 传递到父组件;
7、vue 实现双向绑定,react 没有;
8、vue 父组件更新子组件不会动,react 父更新子必更新,需要手动设置;
目前就更新到这,以后有新内容会继续完善补充,谢谢观看,有什么不足的地方希望你能提点一二,我会一点点改进~ღ( ´・ᴗ・` )比心