<style>
    [v-cloak]{
        visibility: hidden;
    }
    </style>

有的时候我们需要在模板中使用数据a，这个时候就需要用到表达式，但是有的地方我们需要对a数据进行一些简单的处理后才能使用，那么我们就会在表达式中写一些js逻辑运算

```
<div id="example">
{{ message.split('').reverse().join('') }}
</div>
```
这样我们的维护就会非常困难，也不便于阅读


那め我们就可以在methods里设置一个方法，在模板的表达式中使用这个方法

```
<p>Reversed message: "{{ reversedMessage() }}"</p>
// 在组件中
methods: {
reversedMessage: function () {
    return this.message.split('').reverse().join('')
}
}
```

但是这个时候，只要vm中有数据变化，这个变化的数据可能和我们关注的数据无关，但是vm都会重新渲染模板，这个时候表达式中的方法就会重新执行，大大的影响性能


这个时候其实我们可以使用监听器里完成：

在vm实例中设置watch属性，在里面通过键值对来设置一些监听，键名为数据名，值可以是一个函数，这个函数在数据改变之后才会执行，两个参数分别是性格前的值和更改后的值

    a: function (val, oldVal) {
        console.log('new: %s, old: %s', val, oldVal)
    }

值还可以是一个方法名字，当数据改变的时候这个方法会执行

当数据为object的时候，object的键值对改变不会被监听到（数组的push等方法可以）,这个时候需要设置深度监听：

    c: {
        deep:true,
        handler:function (val, oldVal) {
            console.log('new: %s, old: %s', val, oldVal)
        }
    },

监听的handler函数前面的这几种写法都是在数据变化的时候才会执行，初始化的时候不会执行，但是如果设置immediate为true就可以了

    num:{
        immediate:true,
        handler:function(val){
            this.nums = val*2
        }
    }

我们在回到上面的问题，用监听器加上immediate属性就可以做到该效果，但是大家可以看到的是逻辑稍稍有点复杂

watch还可以通过实例对象直接使用:vm.$watch，返回一个取消监听的函数，这个函数执行之后会取消监听


我们一般都会用到一个叫计算属性的东西来解决：

计算属性就是在实例配置项中通过computed来为vm设置一个新的数据，而这个新数据会拥有一个依赖（一条已经存在的数据），当依赖发送变化的时候，新数据也会发送变化

与方法的方式相比，它性能更高，计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。

与watch相比，写起来简单，逻辑性更清晰，watch一般多用于，根据数据的变化而执行某些动作，而至于这些动作是在干什么其实无所谓，而计算属性更有针对性，根据数据变化而更改另一个数据

计算属性也拥有getter和setter，默认写的是getter，设置setter执行可以当此计算属性数据更改的时候去做其他的一些事情，相当于watch这个计算属性

    xm:{
        get:function(){//getter 当依赖改变后设置值的时候
            return this.xing+'丶'+this.ming
        },
        set:function(val){//setter 当自身改变后执行
            this.xing = val.split('丶')[0]
            this.ming = val.split('丶')[1]
        }
    }

    <p>{{msg | firstUpper(3,2)}}</p>

    Vue.filter('firstUpper',function (value,num=1,num2) {
        console.log(num2)
        return value.substr(0,num).toUpperCase()+value.substr(num).toLowerCase()
    })

    filters:{
        firstUpper:function (value,num=1,num2) {
        console.log(num2)
        return value.substr(0,num).toUpperCase()+value.substr(num).toLowerCase()
        }
    }

过滤器只能在mustache插值、v-bind里使用，其他的指令等地方都不能用

    <input type="text" v-model="mode">  
      <template  v-if="mode=='A'">
        <h1>1.title</h1>
        <p>我的第一个P标签</p>  
      </template>
     <template  v-else-if="mode=='B'">
        <h1>2.title</h1>
        <p>我的第二个P标签</p>
     </template>
     <template  v-else-if="mode=='C'">
        <h1>3.title</h1>
        <p>我的第三个P标签</p>
     </template>
     <template  v-else>
       
        <p>不好意思，输入有误</p>
     </template>

Vue.extend(options)

    var App = Vue.extend({
        template:"<h1>hello world</h1>"
    })
    Vue.component('my-app',App)

   // 创建组件构造器和注册组件合并一起  
    Vue.component('hello',{//Vue会自动的将此对象给Vue.extend
        template:"<h1>hello</h1>"
    })

    new Vue({
        el:"#app",
        components:{
            'my-app':App
        }
    })

    data:{},
    components:{
        'hello':{
            template:"<h1>asdasdasdasdasdas</h1>"
        }
    }

<table id="app">
    <tr is="hello"></tr>
</table>

<template id="my-hello">
    <div>
        <h1>hello world</h1>
        <p>hahahah</p>
    </div>
</template>
//组件中
template:"#my-hello"

<component :is="type"></component>

//组件中
data:{
    type:'aaa'
},
components:{
    'aaa':{template:"<h1>AAAAAAAAAAAAA</h1>"},
    'bbb':{template:"<h1>BBBBBBBBBBBBB</h1>"}
}

  <bbb money="2"></bbb>

'bbb':{
    props:['money']

    <bbb clothes-logo='amani' clothes-price="16.58"></bbb>
    ////
    props:['clothesLogo','clothesPrice']

props: ['initialCounter'],
data: function () {
  return { counter: this.initialCounter }
}
//定义一个计算属性，处理 prop 的值并返回：
props: ['size'],
computed: {
  normalizedSize: function () {
    return this.size.trim().toLowerCase()
  }
}

props:{
    //类型验证:
    str:String,
    strs:[String,Number],
    //必传验证
    num:{
        type:Number,
        required:true
    },
    //默认数据
    bool:{
        type:Boolean,
        // default:true,
        default:function(){

            return true
        }
    },
    //自定义验证函数
    nums:{
        type:Number,
        validator: function (value) {
            return value %2 == 0
        }
    }
}

<aaa>abc</aaa>

template:"<h1><slot></slot></h1>"

<my-button>提交</my-button>
<my-button>重置</my-button>
<my-button></my-button>

template:"<button><slot>按钮</slot></button>"

<transition
    leave-active-class="animated fadeOut"
    enter-active-class="animated slideInLeft">
        <p v-if="isShow" class="box"></p>
</transition>

# 全局安装 vue-cli
npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
vue init webpack my-project
//init之后可以定义模板的类型
# 安装依赖，走你
cd my-project
npm install
npm run dev

{
    test: /\.scss$/,
    loader:'style-loader!css-loader!sass-loader'
}

    import Vue from 'vue'
    import Router from 'vue-router'
    Vue.use(Router)

    new Router(options)

    var routes = [
        {path,component}//path为路径，component为路径对应的路由组件
    ]

    new Router({
        routes
    })

    new Vue({
    el: '#app',
    router,
    template: '<App/>',
    components: { App }
    })

<router-link to="main">main</router-link>
<router-link to="news">news</router-link>

.router-link-active{
    color:red;
}

const routes = [
  {path:'/main',component:AppMain},
  {path:'/news',component:AppNews,children:[
    {path:'inside',component:AppNewsInside},
    {path:'outside',component:AppNewsOutside}
  ]},
]

<router-link to='inside'>inside</router-link>
<router-link to='outside'>outside</router-link>

<router-view></router-view>

{path:'',component:Main}

{path:'',redirect:'/main'}
///...放在最下面
{path:'**',redirect:'/main'},

{path:'/user/:id',component:User}

:to='{name:"detail",params:{id:_new.id},query:{content:_new.content}}'

router.beforeEach((to, from, next) => {
    //会在任意路由跳转前执行，next一定要记着执行，不然路由不能跳转了
  console.log('beforeEach')
  console.log(to,from)
  //
  next()
})
//
router.afterEach((to, from) => {
    //会在任意路由跳转后执行
  console.log('afterEach')
})

 routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]

  beforeRouteEnter (to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
  },
  beforeRouteUpdate (to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  },
  beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
  }

<router-view class="view one"></router-view>
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>

const router = new VueRouter({
  routes: [
    {
      path: '/',
      components: {
        default: Foo,//默认的，没有name的router-view
        a: Bar,
        b: Baz
      }
    }
  ]
})

{path:'detail/:id',component:AppNewsDetail,name:'detail',props:true}

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)


//可以设置store管理的state/getter，mutations,actions
const store = new Vuex.Store({

})

import state from './modules/state'
//可以设置store管理的state/getter，mutations,actions
const store = new Vuex.Store({
    state
})

import store from './store'
new Vue({
  el: '#app',
  router,
  store,
  template: '<App/>',
  components: { App }
})

 data(){
    return {
        num:this.$store.state.num
    }
},

computed:{
    num(){
        return this.$store.state.num
    }
}

computed:mapState(['num']),

computed:mapState({
    // _num:'num',//键名为别名，值字符串代表的是真正的状态
    _num(state){//方法名为别名，函数体里还可以对真正的状态做出一些处理
        return state.num
    }
}),

computed:{
    a(){
        return num+1
    },
    ...mapState({
        // _num:'num',//键名为别名，值字符串代表的是真正的状态
        _num(state){//方法名为别名，函数体里还可以对真正的状态做出一些处理
            return state.num
        }
    }),
},

const getters = {
    doublenum(state){
        return state.num*2
    }
}

const mutations = {
    increment(state){
        state.num++
    }
}

const actions = {
    [CHANGE_NUM]({commit}){
        alert(1)
        setTimeout(() => {
            let num = Math.floor(Math.random()*10)
            //调用mitations的方法

            commit(CHANGE_NUM,num)
        }, 1000);
    }
}
``
如上，actions的方法中可以进行异步的动作，且形参会接收store，从中取出commit方法用以调用mutations的方法

在组件中通过this.$store.dispatch方法调用actions的方法

当然也可以使用mapMutations来辅助使用


组件使用数据且通过异步动作更改数据的一系列事情：

1.生成store,设置state
2.在根实例中注入store
3.组件通过计算属性或者mapState来使用状态
4.用户产生操作，调用actions的方法，然后进行异步动作
5.异步动作之后，通过commit调用mutations的方法
6.mutations方法被调用后，更改state
7.state中的数据更新之后，计算属性重新执行来更改在页面中使用的状态
8.组件状态被更改...创建新的虚拟dom......
9.组件的模板更新之后重新渲染在dom中



vuex的使用：
目前市场上有两种使用vuex的情况，

第一种：将需要共享、需要管理的状态放入vuex中管理，也就是说在必要时使用

第二种：将所有的数据都交由vuex管理，由vuex来承担更多的责任，组件变得更轻量级，视图层更轻


---

##### 自定义指令

在实现回到顶部功能的时候，我们写了一个backTop组件，接下来需要通过监听window.scroll事件来控制这个组件显示隐藏

因为可能会有其他的组件会用到这样的逻辑，所以将此功能做成一个自定义指令：

根据滚动的距离控制一个数据为true还是为false（v-scroll-show）

问题：

唯一需要注意的是，在指令的钩子函数中我们可以访问到el，也就是使用指令的标签，但是我们不能直接更改value（指令的值所代表的数据）

所以我们使用引用类型来进行地址的传递来解决这个问题

接下来有写了一个v-back-top指令，就是将回到顶部功能做成一个指令，哪个组件或者dom需要使用到回到顶部，就加上这个指令就可以，设置不同的参数来控制在不同的情况下触发

##### Vue的组件库

组件库就是通用组件的集合

pc：element-ui   iview

mobile： mint-ui


##### nextTick

当我们在使用一些插件的时候，经常需要在dom更新完成后进行必要操作，但是在vue中提供的api只有updated钩子函数，而在这个函数里，任意数据的变化导致的dom更新完成都会触发，所以很可能会造成无关数据的影响，而使用监听的话只能监听到数据的变化，此时dom还没有更新，我们只能强行使用setTimeout来处理

这里推荐大家使用nextTick全局方法：
在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

eq:
getBillBoards(){
    axios.get(this.$root.config.host+'mz/v4/api/billboard/home',{
        params:{__t:Date.now()}
    }).then(res => {
        console.log(res.data.data.billboards)
        this.billboards = res.data.data.billboards

        //当数据更新，dom循环完成后，执行回调
        Vue.nextTick(function () {
            new Swiper('.app-home-banner',{
                loop:true
            }) 
        })
    })
}

##### keep-alive

在component组件、router-view外面包裹上keep-alive的话，就会对组件进行缓存，当切换回来的时候，组件会立即渲染，理论来说，切换组件的时候其实会把上一个组件销毁，使用了keep-alive则不会

设置include、exclude属性控制有选择的缓存

include匹配到的组件会被缓存，exclude匹配到的不会被缓存

值可以为逗号隔开的字符串include = 'a,b';正则:include = '/a|b/';数组:include=['a','b']

使用keep-alive缓存的组件连带它的子组件们都会拥有activated、deactivated钩子函数，会在切换回来和要切换出去的时候触发

比如，main做了缓存，但是main的banner我们希望每次都去重新获取数据，所以就在banner的activated里获取数据


### Vue试题分析

1. v-for可以实现数据遍历显示，不仅可以遍历数组，也可以遍历对象，还可以从数值中取值：

v-for='n in 10' n会打印1-10

2. vue的生命周期钩子：

通用：beforeCreate/created/beforeMount/mounted/beforeUpdate/updated/beforeDestroy/destroyed

路由守卫：beforeRouteEnter/beforeRouteUpdate (2.2 新增)/beforeRouteLeave

keep-alive:activated/deactivated

3. v-if v-show

v-if是真正的条件渲染，会确保在切换中条件块内的事件监听、子组件都会适当的被销毁和重建

v-show总是将节点渲染在dom中，只是基于css：display来控制节点的显示和隐藏

v-if有更高的切换开始，v-show有更高的初始渲染开销

v-if是惰性的，初始条件为假，就不会渲染

4. axios相关

axios请求的时候不会带上cookie，不会影响带宽，可以通过withCredentials：true来设置

对axios 的请求头进行设置：

axios.defaults.headers = {'Content-Type':'...'}

vue2.0不在更新维护vue-resource，官方推荐使用axios

axios拦截器可以拦截请求和响应，在then、catch之前拦截


6. 组件实例的作用域是孤立的，意味着不能（不应该）在子组件模板里直接引用父组件的数据，要让子组件使用父组件数据的话，需要通过props来将父组件的数据传递给子组件，子组件不能也不应该修改父组件传入的数据，但是可以通过传入引用类型的数据来实现数据共享

7.为了让组件可以组合，我们需要一种方式来混合父组件的内容与子组件自己的模板。这个过程被称为内容分发 (即 Angular 用户熟知的“transclusion”)。Vue.js 实现了一个内容分发 API，参照了当前 Web Components 规范草案，使用特殊的 <slot> 元素作为原始内容的插槽。

a-template:

<p>hello world</p>
<b>
	<h1>hello world</h1>
</b>

b-template:

<slot></slot>

....

8. 如果把切换出去的组件保存在内存中，保留状态避免重新渲染，可以使用keep-alive

include exclude 

9. 注册方式：

全局：Vue.component(name,Vue.extend({}))

局部：{ components:{name:Vue.extend({})} }

10. 事件总线实现非父子组件通信

//创建bus

let bus = new Vue()

//a

new Vue({
	template:'...',
	mounted(){
		bus.$on('emit-a',function(){
			alert(1)
		})
	}
})

//b

new Vue({
	template:'...',
	methods:{
		emitA(){
			bus.$emit('emit-a')
		}
	}
})
//当b组件的emitA方法被调用的时候，A组件就会执行alert（1）

11. methods和计算属性的区别

假设我们有一个数据为num，还希望拥有一个数据为doublenum，而且希望doublenum的值永远都是num的二倍

方法：

	* 因为是直接显示在模板中，也就是说，我们可以来一个doublenum的方法，这个方法返回num的二倍，将这个方法放到模板中的某个地方执行 {{doublenum()}}
	  但是，当无关的例如一个str的数据更改的时候，组件会重新创建虚拟dom树，与上一次的虚拟dom树对比之后重新渲染，这个时候在重新渲染模板的时候doublenum函数会被再次的调用，造成不必要的性能浪费
	  
	* 创建一个doublenum数据，使其初始值为num的二倍，然后利用watch来监听这两个数据，在改变的时候更改对应的数据，但是需要初始的为doublenum赋值为num的二倍，如果num是动态获取到的，doublenun赋值会更繁琐
	
	* computed计算数据，我们可以利用computed来创建一条新的doublenum数据。并且设置它的getter和setter，并与num建立关系,且computed会缓存，在重新渲染的时候，不会重新执行getter和setter
	
	computed:{
		doublenum:{
			get(){
				return this.num*2
			},
			set(val){
				this.num = val/2
			}
		}
	}


12. 绑定class的对象语法和数组语法

<a :class="{a:true,b:false,c:1}"> => </a> => <a class='a c'></a>
	
data(){
	return {
		c:'c'
	}
}
<a :class = '["a","b",c]'></a> => </a> => <a class='a b c'></a>


13. 

	new Vue({
		el:"#example-3",
		methods:{
			say(str){
				alert(str)
			}
		}
	})

14. 单向数据流

prop是单向绑定的，父组件属性变化，传递给子组件，但是，子组件数据变化，不能直接传递给父组件，也就是数据的流行是从父组件流向子组件的，为了防止子组件修改父组件的数据（会让应用的数据流变的更难开发、更新、维护）

使用了vuex工具的时候，store中数据在组件中使用的过程也是单向数据流，state->vue component->actions->mutations->state->vue component


15. this.$router.push/replace({name:'user',params:{userId:1})

	this.$router.push/replace({path:'/register',query:{plan:private})
	
	
##### key相关

当数据改变之后，vue会创建新的虚拟dom来和原来的虚拟dom做对比，在创建新的虚拟的dom的时候，会根据key来查找在原来的虚拟dom中有没有某个部分，如果原来的有，这次的也需要，就会实现复用，而且在做diff对比的时候，如果有key会加快对比的查找速度，提高性能

尽量循环的时候不要将key设置为数组的索引，因为当删除某一个元素的时候，就会导致删除位置下面的所有元素的key值都与上一次虚拟dom的key值不同，导致复用失败，这个时候我们最好使用关键的唯一的，例如id这样的数据作为key

如果数据变化只是值的变化而不是条数和位置的变化，可以使用索引作为key

##### Vue.use()

Vue.use会查找插件对象里的install方法去执行,并且给install方法里传入Vue对象


var a = {
    install(Vue){
        Vue.component("my-a",{...})
    }
}

Vue.use(a)

##### 进入域后根据不同的情况显示不同的页面（PC/MOBILE）

很多情况下，一个应用会有PC和移动端两个版本，而这两个版本因为差别大，内容多，所以不能用响应式开发但是单独开发，而域名只有一个，用户进入域后直接返回对应设备的应用，做法主要有两种：

1. 前端判断并跳转

    进入一个应用或者一个空白页面后，通过navigator.userAgent来判断用户访问的设备类型，进行跳转

2. 后端判断并响应对应的应用

    用户地址栏进入域的时候，服务器能接收到请求头上包含的userAgent信息，判断之后返回对应应用

---

    function foo(){// 第16行
        getName = function(){console.log(1)}
        return this
    }
    foo.getName = function(){console.log(2)}
    foo.prototype.getName = function(){console.log(3)}
    var getName = function(){console.log(4)}
    function getName(){console.log(5)}


    foo.getName()//2
    //foo是一个函数，也可以说是一个对象，所以它也可以挂载一些属性和方法，18行在其上挂载了一个getName方法
    //执行的结果是
    
    getName()//4
    //21行有一个全局函数，全局函数声明提前后被20行的getName覆盖，所以输出4

    foo().getName()//1
    //foo()执行完成后，将全局的getName也就是window.getName给更改后返回this，而在这里this执行的就是window，所以最后执行的就是window.getName，所以输出1

    getName()//1
    //在上面已经更改全局的getName，所以依然是1

    new foo.getName()//2
    //new 操作符在实例化构造器的时候，会执行构造器函数，也就是说，foo.getName会执行，输出2

    new foo().getName()//3
    //new操作符的优先级较高，所以会先new foo()得到一个实例，然后再执行实例的getName方法,这个时候，实例的构造器里没有getName方法，就会执行构造器原型上的getName方法

    new new foo().getName()//3
    //先执行new foo()得到一个实例，然后在new 这个实例的getName方法,这个时候会执行这个方法，所以输出3

    //除了本地对象的方法，其他的函数都能new

---