Vue总结

2019-04-28 本文已影响301人木子川页心

应用复杂度VS框架复杂度

渐进式框架

1、声明式渲染Declarative Rendering
2、组件系统Component System
3、客户端路由Client-Side Routing
4.大规模状态管理Large Scale State Management
5.构建工具Build System

Vue的两个核心

响应的数据绑定

当数据发生改变时，自动更新视图
利用Object.defineProperty中的getter/setter代理数据

视图组件

ui页面映射组件
组件可重用，可维护

虚拟DOM

提供一种方便的工具，使得开发效率得到保证
保证最小化的DOM操作，使得执行效率得到保证
用一个函数去实现用js对象的形式去表示嵌套的的Dom,targeName表示根节点，在通过prop表示里面都有哪些属性，再通过数组表示里面都有什么子节点。render函数通过document.creat创建标签并且把子节点插入到里面去，把属性添加到标签上面去。算法优化。

mvvm模式

m:model数据模型
v:view视图模板
vm:View-model 视图模型

vue实例

构造器：
在实例化vue时，需要传入一个选项对象，它可以包含数据、模板。挂载元素、方法、生命周期钩子等选项
vue的属性和方法：
每个vue实例都会代理其data对象
v-bind:data="msg"绑定属性
处理localStorage

      save(key,value){
               localStorage.setItem(key,JSON.stringfy(value))
    },
get(key){
   localStorage.getItem(key)
}
}

watch:普通监听和深层次监听
普通监听：

    list:function(){}
}

深层次监听：浏览器刷新后改变的还存在

list:{
     deep:true,
handler:function(){

}
}
}

监听哈希值得变化

window.addEventListener("hashchange",function(){
   console.log(window.location.hash)
})
computed计算属性
computed:{
 函数1
函数2
}

Vue.directive()

定义自己的组件

全局方式

      template:"<div>我是一个组件</div>"
})

            template: `<div>
             <button @clivk="count++">{{count}}</button>
            </div>`,
            data: function() {
                return {
                    count: 0
                }
            },
            props: ["name"]//name是一个接口
        })

局部组件：

el:"",
components:{
           "first":{
              template:`我是局部组件`
}
}
})

.父组件向子组件传值
在子组件中定义props然后增加属性,props然后创建一个名为message的属性

图片.png

子组件向父组件传值
在子组件中在响应该点击事件的函数中使用$emit来触发一个自定义事件，并传递一个参数

图片.png

vue路由传值的三种方式

vuex:

vuex是一个专为vue.js应用程序开发的状态管理模式；
采用集中式存储管理应用的所有组件的状态
并以相应的规则保证状态以一种可预测的方式发生变化

一、什么是vuex？

在Vue中，多组件的开发给我们带来了很多的方便，但同时将项目规模变大时候，多个组件之间的数据通信和状态管理就显得难以维护了。而Vuex就此应运而生。将状态管理单独掕出来，应用同统一的方式进行处理，在后期维护的过程中数据的修改和维护就变得简单而清晰了。Vuex采用和Redux类似的单项数据流的方式管理数据。用户界面负责触发动作（action）进而改变对应状态（state），从而反映到视图上。
image

二、Vuex的组成部分

完整的应用Vuex开发的结构应该是这样的：
image

1. State

State负责存储整个应用的状态数据，一般需要在使用的时候在根节点注入store对象，后期就可以使用this.$store.state直接获取状态

//store为实例化生成的
import store from './store'

new Vue({
  el: '#app',
  store,
  render: h => h(App)
})

这个store可以理解为一个容器，包含着应用中的state等。实例化生成store的过程是：

const mutations = {...};
const actions = {...};
const state = {...};

Vuex.Store({
  state,
  actions,
  mutation
});

后续在组件中使用的过程中，如果想要获取对应的状态你就可以直接使用this.$store.state获取，当然，也可以利用vuex提供的mapState辅助函数将state映射到计算属性中去，如

//我是组件
import {mapState} from 'vuex'

export default {
  computed: mapState({
    count: state => state.count
  })
}

2. Mutations

Mutations 的中文意思是变化，利用它可以更改状态，本质就是用来处理数据的函数，其接受唯一的参数值state。store.commit(mutationName)是用来触发一个mutation的方法。需要记住的是，定义的mutation必须是同步函数，否则devtool中的数据将可能出现问题，使状态改变变得难以追踪。

const mutations = {
  mutationName(state) {
    //在这里改变state中的数据
  }
}

在组件中触发：

//我是一个组件
export default {
  methods: {
    handleClick() {
      this.$store.commit('mutationName')
    }
  }
}

或者使用辅助函数mapMutations直接将触发函数反射到methods上，这样就能在元素事件绑定上直接使用了。如：

import {mapMutations} from 'vuex'

//我是一个组件
export default {
  methods: mapMutations([
    'mutationName'
  ])
}

3. Actions

Action也可以用于改变状态，不过是通过触发mutations实现的，重要的是可以包含异步操作。其辅助函数是mapActions与mapMutations类似，也是绑定在组件的methods上的。如果选择直接触发的话，使用this.$store.dispatch(actionName)方法。

//定义Actions
const actions = {
  actionName({ commit }) {
    //dosomething
    commit('mutationName')
  }
}

在组件中使用

import {mapActions} from 'vuex'

//我是一个组件
export default {
  methods: mapActions([
    'actionName',
  ])
}

4. Getters

有些状态需要做二次处理，就可以使用getters。通过this.$store.getters.valueName对派生出来的状态进行访问。或者直接使用辅助函数mapGetters将其映射到本地计算属性中去。

const getters = {
  strLength: state => state.aString.length
}
//上面的代码根据aString状态派生出了一个strLength状态

在组件中使用

import {mapGetters} from 'vuex'

//我是一个组件
export default {
  computed: mapGetters([
    'strLength'
  ])
}

5. Plugin

插件就是一个钩子函数，在初始化store的时候引入即可。比较常用的是内置的logger插件，用于作为调试使用。

import createLogger from 'vuex/dist/logger'
const store = Vuex.Store({
  ...
  plugins: [createLogger()]
})

vue 为什么组件的data要写成返回对象的函数

对象为引用类型，当重用组件时，由于数据对象都指向同一个data对象，当在一个组件中修改data时，其他重用的组件中的data会同时被修改；而使用返回对象的函数，由于每次返回的都是一个新对象（Object的实例），引用地址不同，则不会出现这个问题

vue路由实现

hash模式：在浏览器中符号“#”，#以及#后面的字符称之为hash，用window.location.hash读取；
特点：hash虽然在URL中，但不被包括在HTTP请求中；用来指导浏览器动作，对服务端安全无用，hash不会重加载页面。
hash 模式下，仅 hash 符号之前的内容会被包含在请求中，如 http://www.xxx.com，因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回 404 错误。

history模式：history采用HTML5的新特性；且提供了两个新方法：pushState（），replaceState（）可以对浏览器历史记录栈进行修改，以及popState事件的监听到状态变更。
history 模式下，前端的 URL 必须和实际向后端发起请求的 URL 一致，如 http://www.xxx.com/items/id。后端如果缺少对 /items/id 的路由处理，将返回 404 错误。Vue-Router 官网里如此描述：“不过这种模式要玩好，还需要后台配置支持……所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。”

https://segmentfault.com/a/1190000014441507