Vue 小结

1. Vue.component(‘myCom’,{

  Template: ‘#tmp1’/‘<h1>{{msg}}<?h1>’,//和实例中data使用方式一样

   Data: function(){

      Return {

         Msg : ‘这是组建自己的data’

   }//组建中的data必须是一个方法且必须返回一个对象。如果对象是一个全局的对象 当多次调用这个模版 就会共用一个data对象引用 所以要在function中方定义数据对象

}

})

     2.子组件默认无法访问父组件的数据和方法  可以在父组件引用子组件的时候通过属性绑定的形式 把需要的数据传过去

<com1 v-bind:parentmsg=“msg”></com1>

子组件中用

Props:[‘parentmsg’],// 把父组件传递过来的属性在props中定义一下 组件中的所有props中的数据都是从父组件传递过来的 是只读的 字组件的data数据好似可读可写

<com1 v-on:func=“show”></com1> 父组件向子组件传递方法 使用时间绑定机制

This.$emit(‘func’) emit是触发调用 写在子组件的方法中 用来调用父组件传递过来的方法

This.$emit(‘func’，songs) 这时候子组件将自己的data传递给了父组件

触发父组件方法的时候取得子组件的data 赋给自己的data

 

指令keep-alive

在vue-router写着keep-alive，keep-alive的含义：

如果把切换出去的组件保留在内存中，可以保留它的状态或避免重新渲染。为此可以添加一个keep-alive指令

<component :is='curremtView' keep-alive></component>

指令v-el的使用

有时候我们想就像使用jquery那样去访问一个元素，此时就可以使用v-el指令，去给这个元素注册一个索引，方便通过所属实例的$el访问这个元素。

注意

HTML不区分大小写，所以v-el:someEl将转换为全小写。可以用v-el:some-el然后设置this.$el.someEl。

示例

<span v-el:msg>hello</span>
<span v-el:other-msg>world</span>
this.$els.msg.textContent //-> "hello"
this.$els.otherMsg.textContent// -> "world"
this.$els.msg//-><span>hello</span>

写 React / Vue 项目时为什么要在组件中写 key，其作用是什么?

在开发过程中，我们需要保证某个元素的 key 在其同级元素中具有唯一性。在 Diff 算法中 会借助元素的 Key 值来判断该元素是新近创建的还是被移动而来的元素，从而减少不必要的元素重渲染。

vuex 的mutation和action的特性是什么？有什么区别？

mutation用于修改state的数据，是同步的。

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

action 可以包含任意异步操作

vue 的双向绑定的原理是什么

vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过 Object.defineProperty()来劫持各个属性的 setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

vue-router 有哪几种导航钩子?

全局导航钩子

router.beforeEach(to, from, next),

router.beforeResolve(to, from, next),

router.afterEach(to, from ,next)

组件内钩子

beforeRouteEnter,

beforeRouteUpdate,

beforeRouteLeave

单独路由独享组件

beforeEnter

Vue.js 和 AngularJS 之间的区别是什么?

下面是一些选择 Vue 而不是 Angular 的可能原因；

Vue.js 是一个更加灵活开放的解决方案。它允许你以希望的方式组织你的应用程序，而不是任何时候都必须遵循 Angular 制定的规则。它仅仅是一个视图层，所以你可以将它嵌入一个现有页面而不一定要做成一个庞大的单页应用。在结合其他库方面它给了你更大的的空间，但相应，你也需要做更多的架构决策。例如，Vue.js 核心默认不包含路由和 ajax 功能，并且通常假定你在用应用中使用了一个外部的模块构建系统。这可能是最重要的区别

在 API 和内部设计方面，Vue.js 比 Angular 简单得多, 因此你可以快速地掌握它的全部特性并投入开发。

Vue.js 拥有更好的性能，因为它不使用脏检查。当 watcher 越来越多时, Angular 会变得越来越慢，因为作用域内的每一次数据变更，所有的 watcher 都需要被重新求值。Vue 则根本没有这个问题，因为它采用的是基于依赖追踪的观察系统，所以所有的数据变更触发都是独立的，除非它们之间有明确的依赖关系。

Vue.js 中指令和组件的概念区分得更为清晰。指令只负责封装 DOM 操作，而组件代表一个自给自足的独立单元 —— 它拥有自己的视图和数据逻辑。在 Angular 中它们两者间有不少概念上的混淆。

13. Vue.js 和 React.js 有什么区别?

React.js 和 Vue.js 确实有一些相似——它们都提供数据驱动、可组合搭建的视图组件。然而，它们的内部实现是完全不同的。React 是基于 Virtual DOM——一种在内存中描述 DOM 树状态的数据结构。React 中的数据通常被看作是不可变的，而 DOM 操作则是通过 Virtual DOM 的 diff 来计算的。与之相比，Vue.js 中的数据默认是可变的，而数据的变更会直接出发对应的 DOM 更新。相比于 Virtual DOM，Vue.js 使用实际的 DOM 作为模板，并且保持对真实节点的引用来进行数据绑定。

Virtual DOM 提供了一个函数式的描述视图的方法，这很 cool。因为它不使用数据观察机制，每次更新都会重新渲染整个应用，因此从定义上保证了视图通与数据的同步。它也开辟了 JavaScript 同构应用的可能性。

实话实说，我自己对 React 的设计理念也是十分欣赏的。但 React 有一个问题就是组件的逻辑和视图结合得非常紧密。对于部分开发者来说，他们可能觉得这是个优点，但对那些像我一样兼顾设计和开发的人来说，还是更偏好模板，因为模板能让我们更好地在视觉上思考设计和 CSS。JSX 和 JavaScript 逻辑的混合干扰了我将代码映射到设计的思维过程。相反，Vue.js 通过在模板中加入一个轻量级的 DSL (指令系统)，换来一个依旧直观的模板，且能够将逻辑封装进指令和过滤器中。

React 的另一个问题是：由于 DOM 更新完全交由 Virtual DOM 管理，当你真的想要自己控制 DOM 是就有点棘手了（虽然理论上你可以，但这样做时你本质上在对抗 React 的设计思想）。对于需要复杂时间控制的动画来说这就变成了一项很讨人厌的限制。在这方面，Vue.js 允许更多的灵活性，并且有不少用 Vue.js 构建的富交互实例

What are the array detection mutation methods?

As the name suggests, mutation methods modifies the original array. Below are the list of array mutation methods which trigger view updates.

1. push()
2. pop()
3. shift()
4. unshift()
5. splice()
6. sort()
7. reverse()

If you perform any of the above mutation method on the list then it triggers view update. For example, push method on array named 'items' trigger a view update,

What are the array detection non-mutation methods?

The methods which do not mutate the original array but always return a new array are called non-mutation methods. Below are the list of non-mutation methods,

1. filter()
2. concat()
3. slice()

What is dynamic route matching?

Sometimes it may be required to map routes to the same component based on a pattern. Let's take a user component with the mapped URLs like /user/john/post/123 and /user/jack/post/235 using dynamic segments

const User = {

  template: '<div>User {{ $route.params.name }}, PostId: {{ route.params.postid }}</div>'

}

 

const router = new VueRouter({

  routes: [

    // dynamic segments start with a colon

    { path: '/user/:name/post/:postid', component: User }

  ]

})

1. What are dynamic components?

   The dynamic component is used to dynamically switch beetween multiple components using element and pass data to v-bind:is attribute. Let's create a dynamic component to switch between different pages of a website,

   new Vue({

     el: '#app',

     data: {

       currentPage: 'home'

     },

     components: {

       home: {

         template: "<p>Home</p>"

       },

       about: {

         template: "<p>About</p>"

       },

       contact: {

         template: "<p>Contact</p>"

       }

     }

   })

   Now you can use the dynamic component which holds the current page,

   <div id="app">

      <component v-bind:is="currentPage">

          <!-- component changes when currentPage changes! -->

          <!-- output: Home -->

      </component>

   </div>

2. What is the purpose of keep alive tag?

   Keep-alive tag is an abstract component used to preserve component state or avoid re-rendering. When you wrapped tag around a dynamic component, it caches the inactive component instances without destroying them. Let's see the example usage of it,

3. <!-- Inactive components will be cached! -->

   <keep-alive>

     <component v-bind:is="currentTabComponent"></component>

   </keep-alive>

4. When there are multiple conditional children, it requires that only one child is rendered at a time.

   <!-- multiple conditional children -->

   <keep-alive>

     <comp-a v-if="a > 1"></comp-a>

     <comp-b v-else></comp-b>

   </keep-alive>

5. What are async components?

   In large applications, we may need to divide the app into smaller chunks and only load a component from the server when it’s needed. To make this happen, Vue allows you to define your component as a factory function that asynchronously resolves your component definition. These components are known as async component. Let's see an example of async component using webpack code-splitting feature,

6. Vue.component('async-webpack-example', function (resolve, reject) {

     // Webpack automatically split your built code into bundles which are loaded over Ajax requests.

     require(['./my-async-component'], resolve)

   })

7. Vue will only trigger the factory function when the component needs to be rendered and will cache the result for future re-renders

8. What is the purpose of vuejs compiler?

   The compiler is is responsible for compiling template strings into JavaScript render functions. For example, the below code snippet shows the difference of templates which need compiler and not,

9. // this requires the compiler

   new Vue({

     template: '<div>{{ message }}</div>'

   })

   // this does not

   new Vue({

     render (h) {

       return h('div', this.message)

     }

   })

What are modules in vuex?

If you keep all state of our application in a single big state, the store can get really bloated. To solve this problem, Vuex allows us to divide our store into modules. Here, each module can contain its own state, mutations, actions, getters, and even nested modules. Let's take an example with multiple modules, configuring them in vuex and accessing different modules,

const moduleOne = {

  state: { ... },

  mutations: { ... },

  actions: { ... },

  getters: { ... }

}

 

const moduleTwo = {

  state: { ... },

  mutations: { ... },

  actions: { ... },

  getters: { ... }

}

 

const store = new Vuex.Store({

  modules: {

    one: moduleOne,

    two: moduleTwo

  }

})

store.state.one // -> `moduleOne's state

store.state.one // -> `moduleTwo's state