Vue学习随笔

1.Vue指令
2.vue-cli项目
3.vue源码分析
4.我的核心总结

1.Vue指令

1.常用内置指令

参考博客

2.自定义指令

参考vue文档

3.原型与实例

构造函数有个 prototype 属性指向原型对象
实例化的对象有一个 [[prototype]] 属性指向原型对象
原型对象有一个 constructor 属性指向构造函数。
实例对象通过构造函数进行创建，原型对象是有了构造函数就会产生的。
原型对象中的方法可以被实例对象所共享
实例对象中没有方法，但是可以调用，是因为实例对象的原型__proto__指向了构造函数的原型对象（桥梁），所以可以调用。
未实例化Vue时，Vue.调用函数对象的方法
Vue.$调用实例对象的方法
原型实例构造：参考博客

2.vue-cli项目

1.组件化编码

脚手架的本质是库
export 暴露
import导入
Vue.use()声明使用

2.参数传递及重定向

只能有一个根节点
通过设置路由中的props属性解耦
404页面，
测试数据：mock文件夹

3.路由钩子与异步请求

路由钩子函数

beforeRouteEnter:(to, from, next) =>{
    next()
}
//进入路由前执行
beforeRouteLeave:(to, from, next) =>{
    next()
}
//离开路由前执行

链式编程

axios.get('data.json').then(response=>(---))

4.babelrc

rc->runtime control
es6->es5

5.组件

局部功能界面
包含所有本实现功能界面所需资源

6.关于冒泡

onmouseenter&onmouseleave事件，鼠标经过时自身触发事件，经过其子元素时不触发该事件。（父亲的东西就是父亲的，不归儿子所有），不支持冒泡
onmouseover&onmouseout事件，鼠标经过时自身触发事件，经过其子元素时也触发该事件；（父亲有的东西，儿子也有），支持冒泡

7.持久化、存储数据

使用localStorage，将数据存储在本地文件，存储形式为txt文本
使用深度监视，实时存储在本地 deep: true//深度监视，handler: function (value){触发函数}
在存储和取值的时候要注意转化和解析json字符串格式

8.组件间通信

props
v-on绑定自定义事件:$on(eventName, function)监听事件、$emit(eventName, optionalPayload)触发事件，用于父子之间传递
消息订阅与发布(pubsub-js).
slot(插槽):由于父组件向子组件传递标签数据
vuex

9.axios

npm install axios --save
在哪使用在哪引入
测试接口：https://api.github.com/search/repositories?q=vue&sort=stars

10.案例：搜索

兄弟组件间传递数据使用pubsub订阅发布消息
使用axios异步请求
使用模板字符串携带参数
测试接口：https://api.github.com/search/users?q=aa
使用.map()解析返回值

11.vue UI 组件库

安装mint-ui：npm i mint-ui -S
借助 babel-plugin-component，我们可以按需导入组件，以达到减小项目体积的目的
安装babel-plugin-component：npm install babel-plugin-component -D
vue2.0+按需引入时修改babel.config.js的配置，plugins里面不能再使用数组作为参数
手机端适配的meta代码：

手机端适配的js代码：

<script>
    if ('addEventListener' in document) {
        document.addEventListener('DOMContentLoaded', function () {
            FastClick.attach(document.body);
        }, false);
    }
    if (!window.Promise) {
        document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"' + '>' + '<' + '/' + 'script>');
    }
</script>

1.关于命令参数

-D == --save-dev  写入devDependencies（开发环境依赖模块）只会在开发环境下依赖的模块，生产环境不会被打入包内。通过NODE_ENV=developement或NODE_ENV=production指定开发还是生产环境。 
-S == --save  写入dependencies（生产环境依赖模块）

2.关于版本

对vue进行降版本，同时需要注意vue-template-compiler的版本，必须保持两者版本一致
设置一下vue.config.js中的配置 runtimeCompiler: true

12.vue 路由介绍

1.基本路由

单页面应用（SPA）：一个真实页面
点击路由链接，不向后台发送请求
路由器管理路由
路由是映射关系 K - V
path - {前台路由：组件，后台路由：处理请求的回调函数}
<router-link/>:用来生成路由链接
<router-view/>:用来显示当前路由组件界面
实际项目中分为两种组件 views：路由组件、components：非路由组件
单独创建路由器模块：router/index.js
默认路由组件：{ path: '/', redirect: '/XXX' }

2.嵌套路由

1.关于数据结构的设计和选择

数组/对象/普通数据

2.流程

定义组件
注册路由
配置嵌套路由：路由属性children:[]

3.注意事项

path最左侧的/永远代表根路径
嵌套路由path两种写法：全路径或省略'/'
嵌套路由默认显示：子路由添加路由{path: "", redirect: '全路径'}
排错方法：先看是否报错 => 查看数据是否异常 => 查看代码

3.缓存路由组件

一个路由组件被切换时死亡，切换回来时重新创建

<keep-alive>
  <router-view></router-view>
</keep-alive>

被缓存的是组件对象
实际工作中根据数据的实时性要求高/低来使用

4.向路由传递参数

1.vue的两种通过路由路径传参方式

query传参方式

this.$router.push({
   path: "/home",
   query: {code:"123"}
})

param传参方式

this.$router.puth({
   name: "/home",
   param: {code: "123"}  
})

在配置路由时使用:xxx占位符，传参方式为param
数据中的$route代表当前路由，取得当前路由param的值$route.params
当仅改变路由参数时，通过监视$route实时做出响应

2.通过`<router-view></router-view>`传递数据

5.编程式路由导航

1.页面跳转的两种方式

<a/>标签链接跳转
js代码实现跳转 =>编程式

2.路由实现的两种方式

/#/：hash，h5之前的方法，浏览器使用location.hash和hashchange事件来实现对路径的保存、监视
istory api，使用html5的history api实现，主要就是popState事件等

3.使用js代码实现页面跳转的几种方式

window.location = url
this.$router.push: 会向history栈添加一个记录，点击后退会返回到上一个页面
this.$router.replace: 用新路由替换当前路由，不会向history里面添加新的记录，点击返回，会跳转到上上一个页面。上一个记录是不存在的

4.关于数组

栈：先进后出
队列：先进先出

5.关于组件对象

this => $route：代表当前路由组件，有一些数据
this => $router：代表路由器，功能的对象，有操作路由的一些方法

6.js实现回退

$router.back：请求（返回）上一个记录路由
$router.go(-1)：请求（返回）上一个记录路由

13.Vuex

1.vuex是什么

vuex是vue的一个插件
对vue应用中多个组件的共享状态进行集中式的管理（读/写）

2.什么是状态自管理应用

1.state：驱动应用的数据源

2.view：以声明方式将state映射到视图

3.actions：响应在view上的用户输入导致的状态变化（包含n个更新状态的方法）

3.多组件共享状态的问题

多个视图依赖于统一状态
来自不同视图的行为需要变更同一状态
vuex就是用来解决这个问题的

4.vuex的运行模式

在vuex中actions不会直接更新state
由mutations来直接更新state状态数据

5.store对象

所有用vuex管理的组件中都多了一个属性$store，它就是一个store对象
属性: {state: 注册的state对象, getters: 注册的getters对象}
方法: dispatch(actionName, data): 分发调用action

6.store.js: vuex的核心管理对象模块

export default new Vuex.Store({
    state,//vuex管理的状态对象，它应该是唯一的
    mutations,//包含多个更新state的方法（回调函数）的对象，commit()调用
    actions,//包含多个对应事件回调函数的对象，$store.dispatch()调用
    getters//包含多个getter计算属性函数的对象
})

7.vuex的辅助函数

mapState：当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用 mapState 辅助函数帮助我们生成计算属性
...对象展开符可以优化代码

//之前的computed
computed:{
    fn1(){ return ...},
    fn2(){ return ...},
    fn3(){ return ...}
    ........
}
//引入mapState辅助函数之后
 
computed:{
    //原来的继续保留
    fn1(){ return ...},
    fn2(){ return ...},
    fn3(){ return ...}
    ......
    //再维护vuex
    ...mapState({  //这里的...不是省略号了,是对象扩展符
        count:'count'
    })

8.main.js中的render配置

components: {App},//将App映射为标签
template: '<App/>',//使用App标签

render: h => h(App),//渲染函数，传入参数为函数类型(createElement()根据组件创建元素标签)，返回传入函数的返回值<App/>

render可以代替components与template配置

3.vue源码分析

1.说明

分析vue作为一个MVVM框架的基本实现原理
- 数据代理
- 模板解析
- 数据绑定

2.知识点

1.理解源码所需的一些知识点

将伪数组转化为真数组：伪数组不是数组，本质上是一个对象，特性是有length属性、有下标属性，ES6语法中使用Array.from(lis)转化，ES5语法中使用Array.prototype.slice.call(lis)获取数组
.call让一个函数成为指定对象的方法并进行调用，函数中的this在定义时无法确定，只有在执行时才能确定
最大的节点是document/文档 => 整个html文件，其次是Element/元素，再其次是Attr/属性，再其次是Text/文本
node.nodeType：得到节点类型
Object.defineProperties(obj, propertyName, {})：给对象添加属性(指定描述符)
属性描述符
- 数据描述符
- 访问描述符号
vue不支持IE8的根本原因，是因为vue使用了Object.defineProperties(obj, propertyName, {})作为核心语法
obj.hasOwnProperty(prop)：判断prop是否是obj自身的属性
DocumentFragment接口是内存中保存n个element的容器对象（不与界面关联），如果更新framgment中的某个element，界面不变。文档碎片（高效批量更新多个节点）
一个节点只能有一个父亲，当一个节点被添加为其他节点的子节点，它将从原来的父节点移除
通过DOM的方式取到的多个节点/元素都是伪数组
当向一个节点添加文档片段时，添加的是文档片段的子节点群，自身不会被添加进去

2.关于debug

调试中的重点：如何打断点
断点只能打在一条语句的开头
调用栈：函数依次调用的堆栈的保存记录

3.源码分析——数据代理

数据代理：通过一个对象代理对另一个对象中的属性的操作（读/写）
vue数据代理：通过vm对象来代理data对象中所有属性的操作
最终通过Object.defineProperty(obj, propertyName, {})为vm对象添加属性（包括get、set方法），来实现数据代理

4.源码分析——模板解析

1.表达式解析

{{name}}如何显示对应的数据？这就是表达式解析需要研究的内容
最重要三步
- 将页面中el所有的子节点转移到framgment中
- 在内存中进行编译，遍历framgment中的子节点
  - 对存在子节点的节点递归调用编译，编译所有层次的子节点
  - 当遍历到元素节点时，编译该节点所有指令属性
  - 当遍历到文本节点并且符合正则表达式/{{(.*)}}/时，取得子匹配的值，调用编译bind指令的函数并传入参数，通过参数调用text更新函数给节点指定特定的属性值，特定的属性值是子匹配的值用.split('.')分割后遍历，取出的vm对象中的data中对应的数据
- 将framgment添加为el的子节点

2.事件指令解析

p54待补全

5.源码分析——数据绑定

待补全

4.我的核心总结

vue组件化编码思想
常用vue指令和配置
vue-router的配置及使用方法
vue中数据的流向
vuex的配置和使用
vuex的工作流程
一些vue特性的底层实现思路
项目经验

Vue学习随笔

1.Vue指令

1.常用内置指令

2.自定义指令

3.原型与实例

2.vue-cli项目

1.组件化编码

2.参数传递及重定向

3.路由钩子与异步请求

4.babelrc

5.组件

6.关于冒泡

7.持久化、存储数据

8.组件间通信

9.axios

10.案例：搜索

11.vue UI 组件库

1.关于命令参数

2.关于版本

12.vue 路由介绍

1.基本路由

2.嵌套路由

1.关于数据结构的设计和选择

2.流程

3.注意事项

3.缓存路由组件

4.向路由传递参数

1.vue的两种通过路由路径传参方式

2.通过<router-view></router-view>传递数据

5.编程式路由导航

1.页面跳转的两种方式

2.路由实现的两种方式

3.使用js代码实现页面跳转的几种方式

4.关于数组

5.关于组件对象

6.js实现回退

13.Vuex

1.vuex是什么

2.什么是状态自管理应用

1.state：驱动应用的数据源

2.view：以声明方式将state映射到视图

3.actions：响应在view上的用户输入导致的状态变化（包含n个更新状态的方法）

3.多组件共享状态的问题

4.vuex的运行模式

5.store对象

6.store.js: vuex的核心管理对象模块

7.vuex的辅助函数

8.main.js中的render配置

3.vue源码分析

1.说明

2.知识点

1.理解源码所需的一些知识点

2.关于debug

3.源码分析——数据代理

4.源码分析——模板解析

1.表达式解析

2.事件指令解析

5.源码分析——数据绑定

4.我的核心总结

2.通过`<router-view></router-view>`传递数据