2018-05-09

vue部分知识点

vue常用知识点

我们不要卖产品，而是卖解决问题的方案方法

模式 MVVM

MVVM model-view-viewModel

model:代表数据模型，定义数据操作的业务逻辑。
view：代表视图层，负责把数据模型渲染到页面上。
viewModel:通过双向绑定把view和model进行同步交互，不需要手动操作dom的思想。

双向绑定原理

数据劫持结合发布者、订阅者模式

通过Object.defineProperty()来劫持各属性的setter和getter，在数据变动时发布消息给订阅者，触发相应的监听回调。
扩展：此过程会延迟处理，主要是因为短时间内可能会多次触发改变，所以需要延时处理，目的是优化性能。可参考函数截流
函数截流：主要实现思路就是通过setTimeout定时器，通过设置延时时间，在第一次调用时，创建定时器，写入需要执行的函数。第二次调用时，会清除前一个定时器并设置新的定时器。如果这时前一个定时器暂未执行，则将其替换为新的定时器。目的在于在一定的时间内，保证多次函数的请求只执行最后一次。

这里有个注意点。就是对数组的操作。其实它重写了数组的方法。

代码实现：

<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 (e) {
        obj.txt = e.target.value
    })
</script>

封装vue组件

使用vue.extend方法创建组件，（也可直接新建组件文件）。使用vue.component注册组件。

组件传值

父传子：props 父组件的值传入子组件，子组件用props接收
子传父：

$emit 通过事件传递，$emit(‘事件名,’传的值’)
ref this.$root.$refs.ref的name.$data.要传的变量

子子：bus.$emit(‘val’,’xxx’) . bus.$on(‘val’,(data)=>{//do soming})

vue和react的区别

相同点：都鼓励组件化，都有’porps’的概念，都有自己的构建工具，react与vue只有框架的骨架，其他的功能如路由、状态管理等是框架分离的组件。
不同点：react：数据流单向，语法–jsx。在react中需要使用setState()方法去更新状态。适用于大型应用。
vue：双向数据绑定，语法–html，state对象不是必须的。数据由data属性在vue对象中进行管理。适用于中小型应用。

key的作用 – 更高效的更新虚拟dom。

生命周期：

组件生命周期

beforeCreate,created,beforeMount,mounted,beforeUpdate,updated,activated,deactivated,beforeDestroy,destroyed

路由生命周期：（钩子函数）

全局钩子：router.beforeEach(to,from.next) 全局拦截 router.afterEach
单个路由里的钩子函数：beforeEnter(to,from,next) beforeLeave(to,from.next) . 写在路由里，path
组件路由：beforeRouteEnter(to,from.next) beforeRouteUpdate(to,from.next) beforeRouteLeave(to,from,next)

如何优化SPA应用首屏加载速度慢的问题

将公用的js库用script引入。减小app.bundel的大小。让浏览器并行下载资源，提高下载速度。
配置路由时用懒加载的方式。
在首屏做loading图，提升用户体验

keep-alive

做页面缓存很重要。

$route和$router的区别

$route是“路由信息对象”，包括path，params，hash，query，fullPath，matched，name等路由信息参数。
而$router是“路由实例”对象包括了路由的跳转方法，钩子函数等

computed和watch的区别

computed:是计算属性，是依赖其他属性计算得出的结果。值在getter执行后是会缓存的，只有在它依赖的属性值改变之后，才会重新调用对应的getter来计算，经常用于一个值依赖于多个值。如计算价格（单价和数量、优惠券和余额以及sku等）【多对一】
watch：是监听某一个值的变化执行对应的方法。常用于一个值得改变会引发多个值得改变。watch的回调里面会传入监听属性的新旧值【一对多】

vue常用修饰符

.prevent: 提交事件不再重载页面；
.stop: 阻止单击事件冒泡；
.self: 当事件发生在该元素本身而不是子元素的时候会触发；
.capture: 事件侦听，事件发生的时候会调用
.trim自动过滤用户输入的首尾空白字符

vue-router传值

通过：

this.$router.push({ path:`/dash/${id}` }) 

需要对应路由配置：{path:'/dahs/:id',name:'Dash',component:Dash}

$route.params.id

通过name确定匹配路由，通过params来传递参数

this.$router.push({
    name:'Dash',
    params:{
        id:id
    }
}) 
对应路由配置：{path:'/dahs',name:'Dash',component:Dash}
 $route.params.id

通过path匹配路由，通过query传递参数

this.$router.push({
    path:'/dash',
    query:{
        id:id
    }
}) 
对应路由配置：{path:'/dahs',name:'Dash',component:Dash}
 $route.query.id

params和query的区别：

params刷新会消失。。。query则不会

params：/router1/:id ，/router1/123，/router1/789 ,这里的id叫做params。params相当于post请求，参数不会再地址栏中显示

query：/router1?id=123 ,/router1?id=456 ,这里的id叫做query。query相当于get请求，页面跳转的时候，可以在地址栏看到请求参数

$nextTick

$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM

父组件中调用子组件的方法

给子组件定义一个ref属性。eg:ref=”childItem”
在子组件的methods中声明一个函数。eg: useInPar:function (str) {console.log(str)}
在父组件的中声明一个函数，并通过this.$refs.childItem.userInPar来使用子组件中声明的函数。

// this.$refs.refName.funName

子组件中调用父组件的方法

第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法
第二种方法是在子组件里用$emit向父组件触发一个事件，父组件监听这个事件就行了。

ref

ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例

vue如何兼容ie

babel-polyfill插件

vuex

1、有哪几种属性
有 5 种，分别是 state、getter、mutation、action、module
state => 基本数据
getters => 从基本数据派生的数据
mutations => 提交更改数据的方法，同步！
actions => 像一个装饰器，包裹mutations，使之可以异步。
modules => 模块化Vuex

2、vuex 的 store 特性是什么

(1) vuex 就是一个仓库，仓库里放了很多对象。其中 state 就是数据源存放地，对应于一般 vue 对象里面的 data

(2) state 里面存放的数据是响应式的，vue 组件从 store 读取数据，若是 store 中的数据发生改变，依赖这相数据的组件也会发生更新

(3) 它通过 mapState 把全局的 state 和 getters 映射到当前组件的 computed 计算属性

3、 vuex 的 getter 特性是什么

(1) getter 可以对 state 进行计算操作，它就是 store 的计算属性

(2) 虽然在组件内也可以做计算属性，但是 getters 可以在多给件之间复用

(3) 如果一个状态只在一个组件内使用，是可以不用 getters

4、vuex 的 mutation 特性是什么

action 类似于 muation, 不同在于：action 提交的是 mutation,而不是直接变更状态

action 可以包含任意异步操作

5、vue 中 ajax 请求代码应该写在组件的methods中还是vuex 的action中

如果请求来的数据不是要被其他组件公用，仅仅在请求的组件内使用，就不需要放入 vuex 的 state 里

vue-cli指令：

1、创建局部指令：

var app = new Vue({
    el: '#app',
    data: {    
    },
    // 创建指令(可以多个)
    directives: {
        // 指令名称
        dir1: {
            inserted(el) {
                // 指令中第一个参数是当前使用指令的DOM
                console.log(el);
                console.log(arguments);
                // 对DOM进行操作
                el.style.width = '200px';
                el.style.height = '200px';
                el.style.background = '#000';
            }
        }
    }
})

2、全局指令：

Vue.directive('dir2', {
    inserted(el) {
        console.log(el);
    }
})

3、指令使用：

<div id="app">
    <div v-dir1></div>
    <div v-dir2></div>
</div>

自定义过滤器：

filters: {
    //过滤器名字		
    capitalize: function (value) {
        if (!value) return ''
        return  value.toFixed(2)
    }
}