vue2前端框架基础笔记

本篇文章需要有一定的vue基础，强烈建议先看初学系列文章

 接触到vue2的时候，是需要明白一下概念

1 数据绑定原理、组件原理、钩子函数、

2 插件vue-route、vuex、axios、bus总线

3前端UI框架  element-ui，echarts图表插件

4 互联网公司vue常见面试题

一：基础概念

一个vue对象通常包括下面几个属性

el：  //dom元素

data：  //vue对象的数据，做初始化声明用(如果后台采用ajax时候)
methods： //vue对象的方法，定义的调用方法都在这个里面

created： //8个生命周期函数之一
watch： //对象监听的方法，不常用
computed： //计算逻辑放到computed中，不常用

从图上我们可以看到vue在生命周期中有这些状态，beforeCreate,created,beforeMount,mounted,beforeUpdate,updated,beforeDestroy,destroyed。Vue在实例化的过程中，会调用这些生命周期的钩子，给我们提供了执行自定义逻辑的机会。那么，在这些vue钩子中，vue实例到底执行了那些操作，我们先看下面执行的例子

Vue.js 的插件应当有一个公开方法 install 。这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象,通过全局方法 Vue.use() 使用插件.

我刚开始学习时，总是不清楚Vue.use()与Vue.component()用法，一个是注册插件(vue实例)，一个是注册组件(一个组件由template、js、css组成)，组件可以一个标签使用

难点

splot

了解内容：

动态组件：可以通过 Vue 的 <component> 元素加一个特殊的 is 特性来实现：

<!-- 组件会在 `currentTabComponent` 改变时改变 --> <component v-bind:is="currentTabComponent"></component>

有些 HTML 元素，诸如 <ul>、<ol>、<table> 和 <select>，对于哪些元素可以出现在其内部是有严格限制的。而有些元素，诸如 <li>、<tr> 和 <option>，只能出现在其它某些特定的元素内部。

这会导致我们使用这些有约束条件的元素时遇到一些问题。例如：

<table> <blog-post-row></blog-post-row> </table>

这个自定义组件 <blog-post-row> 会被作为无效的内容提升到外部，并导致最终渲染结果出错。幸好这个特殊的 is 特性给了我们一个变通的办法：

<table> <tr is="blog-post-row"></tr> </table>

疑问

因为项目要使用vue开发。学习了一段时间之后有几个问题一直困惑着我：
（1）首先就是.vue结尾的文件为何需要export default，就像下面的代码一样？
（2）为什么data需要return，我不用return，直接 data(){
    menu:MENU.data,
    poi:POILIST.data
}不行吗？
官方关于data返回值的答案

data 必须是一个函数

当我们定义这个 <button-counter> 组件时，你可能会发现它的 data 并不是像这样直接提供一个对象：

data: { count: 0 }

取而代之的是，一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝：

data: function () { return { count: 0 } }

如果 Vue 没有这条规则，点击一个按钮就可能会像如下代码一样影响到其它所有实例：

二：vue-route

   就是页面跳转，其生命周期有2个钩子方法，进入页面前后调用的方法

router.beforeEach((to, from, next) => {
    window.document.title = to.meta.title;
    next();
});

router.afterEach((to, from, next) => {
    window.scrollTo(0, 0);
});

实现页面跳转有2种方式：(1)<router-link to="/about">跳转到 about</router-link>

(2)<template>
    <div>
        <h1>介绍页</h1>
        <button @click="handleRouter">跳转到 user</button>
    </div>
</template>
<script>
    export default {
        methods: {
            handleRouter () {
                this.$router.push('/user/123');
            }
        }
    }
</script>

嵌套路由就是设置children属性，就是当前页面和跳转页面都是同一个页面，这个时候一定要设置<router-view>属性，否则页面加载不成功

  三 vuex与bus总线

　    bus总线：var Event = new Vue();　相当于又new了一个vue实例，Event中含有vue的全部方法；

　　Event.$emit('msg',this.msg);　发送数据，第一个参数是发送数据的名称，接收时还用这个名字接收，第二个参数是这个数据现在的位置；

　　Event.$on('msg',function(msg){　　接收数据，第一个参数是数据的名字，与发送时的名字对应，第二个参数是一个方法，要对数据的操作　/这里是对数据的操作})

官方文档API

在vue的组件化开发中，经常会遇到需要将当前组件的状态传递给其他组件。父子组件通信时，我们通常会采用 props + emit 这种方式。但当通信双方不是父子组件甚至压根不存在相关联系，或者一个状态需要共享给多个组件时，就会非常麻烦，数据也会相当难维护，这对我们开发来讲就很不友好。vuex 这个时候就很实用，不过在使用vuex之后也带来了更多的概念和框架，需慎重！任何组件只要使用同一store的数据时，只要store的数据变化，对应的组件也会立即更新。在组件内，来自store的数据只能读取，不能手动改变，改变store中数据的唯一途径就是显示的提交mutation，Mutations修改状态（$store.commit( )）

const store = new Vuex.Store({
    state: {
        name: 'weish',
        age: 22
    },
    getters: {
        personInfo(state) {
            return `My name is ${state.name}, I am ${state.age}`;
        }
    }
    mutations: {
        SET_AGE(state, age) {
            commit(age, age);
        }
    },
    actions: {
        nameAsyn({commit}) {
            setTimeout(() => {
                commit('SET_AGE', 18);
            }, 1000);
        }
    },
    modules: {
        a: modulesA
    }
}

这个就是最基本也是完整的vuex代码；vuex 包含有五个基本的对象：

• state：存储状态。也就是变量；
• getters：派生状态。也就是set、get中的get，有两个可选参数：state、getters分别可以获取state中的变量和其他的getters。外部调用方式：store.getters.personInfo()。就和vue的computed差不多；
• mutations：提交状态修改。也就是set、get中的set，这是vuex中唯一修改state的方式，但不支持异步操作。第一个参数默认是state。外部调用方式：store.commit('SET_AGE', 18)。和vue中的methods类似。
• actions：和mutations类似。不过actions支持异步操作。第一个参数默认是和store具有相同参数属性的对象。外部调用方式：store.dispatch('nameAsyn')。
• modules：store的子模块，内容就相当于是store的一个实例。调用方式和前面介绍的相似，只是要加上当前子模块名，如：store.a.getters.xxx()。

四 前端框架element-ui

npm i element-ui -S

然后在main.js中引入

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
比如想要展示表格：可以参考官网 多种多样的表格样式

使用图表展示时，使用了 vue-echarts-v3这个插件，用于作数据图表动态展示

npm install --save echarts vue-echarts-v3

vue-echarts-v3使用说明

小结：

前端页面调试用vue-devtools vue开发调试神器，代码开发建议用sublime

 五：面试题

1.简单进行一下自我介绍

2. 说说你在工作中遇到的问题以及关键技术

3. Vue响应式原理

4. v-model的实现原理

5. slice slipce的函数签名

6. 如何实现跨域访问

7. jsonp的原理

8. 向数组首位加入一个子项，如何避免修改原数组

9. ES6中的箭头函数与普通函数的区别

       箭头函数中没有自己的this，arguments，new target（ES6）和 super(ES6)。箭头函数相当于匿名函数，因此不能使用new来作为构造函数使用。箭头函数中的this始终指向其父级作用域中的this。换句话说，箭头函数会捕获其所在的上下文的this值，作为自己的this值。任何方法都改变不了其指向，如call(), bind(), apply()。

10. Vue1.0和Vue2.0的主要区别

11. 说一说async函数中await的用法

12. Vue2.0中已初始化某个数组a=[1,2,3]，执行a.length=0后，视图会不会更新

13. Object.defineProperty的函数签名`

 

后记：

我学习vue时，前期准备的时间较久，一直是angular与vue之间徘徊，这一周收获还是很大的，算是能根据vue的特点去做一些简单的demo, vue作者是中国人，所以从官网上学习是毫不吃力的，elementUI更简单，几分钟就能入门。