vue初学干货

vue初学干货

本篇文章是一写vue的知识点，只适合刚开始接触vue的同学用来学习参考，主要还是要参考vue官网及vue API

1. Vue的两个核心

     数据驱动：ViewModel，保证数据和视图的一致性。
     组件系统：应用类UI可以看作全部是由组件树构成的。
   

2. 在vue中is的使用场景

     改变html标签的默认规则，比如ul里放li，dl里放dt等，
     动态切换组件：
     <component v-bind:is="currentView"></component>
     特殊嵌套：
     <table>
        <tr is="my-row"></tr>
     </table>
   

3. 常用指令及常用事件修饰符

   用指令	常用事件修饰符
   v-bind	stop (阻止冒泡)
   v-if (显示和隐藏)	prevent (阻止默认事件)
   v-else (必须和v-if连用)	capture (将事件流设为捕获方式)
   v-on:click (给标签绑定的时候可简写为@)	self (只对自身触发事件)
   v-text (解析html标签)	once (只执行一次)
   v-html (解析文本)	enter (回车键)
   v-show (显示内容)	tab
   v-hide (隐藏内容)	delete (删除)
   v-for	esc (退出)
   v-model (表单元素实现双向数据绑定)	space (空格)
   v-focus (自动获取焦点命令)	up (上)
   v-clock	down (下)
   :is (用来切换组件值填写组件名称即可)	left (左)
   v-enter	right (右)
   v-enter-active	config.keyCode (自定义修饰符)
   v-enter-to	lazy
   v-leave	number
   v-leave-active	trim
   v-leave-to	sync (自动添加一个update事件很方便的让子组件去修改total值)

4. v-if和v-show的区别

     v-show通过控制display：none，v-if通过删除节点。
     频繁操作元素显示隐藏使用v-show
     v-show和v-if都可以控制元素的显示与隐藏。
   

5. 渐进式框架

     主张最少 框架分层
     最核心的是视图层渲染，然后往外是组件机制，在此基础上再加入路由机制，再加入状态管理，最外层是构建工具
   

6. 组件的定义

     Vue最核心的功能之一，类似自定义标签，但是它具有独立的HTML+JS，独立的数据管理
     组件的优势：重用性比较高、自由组合
   

7. 组件的作用如何定义组件和使用组件

     组件是可复用的Vue实例,如果网页中的某一个部分需要在多个场景中使用，那么我们可以将其抽出为一个组件进行复用。组件大大提高了代码的复用率。
   

8. 定义组件有两种方式

     全局方式
   		直接使用Vue.component()创建的组件，所有的Vue实例都可以使用。
     局部方式
   		三步:1.创建这个组件；2.注册这个组件；3.使用这个组件
   

9. 组件化

   一个具有独立的逻辑和功能或界面，同时又能根据规定的接口规则进行相互融合，变成一个完整的应用页面只不过是这些组件的容器，组件自由组合形成功能完善的界面，当不需要某个组件，或者想要替换某个组件时，可以随时进行替换和删除，而不影响整个应用的运行。
   特点: 提高开发效率、方便重复使用、简化调试步骤、提升项目的可维护性、便于协同开发

10. 组件中data为什么不是一个对象而是一个函数

    组件中的data写成一个函数，数据以函数返回值形式定义，这样每复用一次组件，就会返回一份新的data，类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据。而单纯的写成对象形式，就使得所有组件实例共用了一份data，就会造成一个变了全都会变的结果。

11. 计算属性对比监听函数

    计算属性与普通data中的属性区别在于，计算属性可以通过一些运算逻辑返回属性值， 函数会在相关属性值变化时自动执行，也就是说计算属性也是动态绑定的。场景：主要是对data里面的数据进行过滤，往往过滤的过程中不应该影响原始数据

    1.意义不同：计算属于用于返回一个计算结果、watch是完成一系列动作
    2.异步代码：watch可以包含异步操作，计算属性不行
    3.缓存效果：重新渲染值不变化,计算属性会立即返回之前的计算结果，watch不能缓存

12. Watch和computed的区别

       computed特性
       1.是计算值(过滤data中的数据)
       2.应用：就是简化tempalte里面{{}}计算和处理props或$emit的传值
       3.具有缓存性，页面重新渲染值不变化,计算属性会立即返回之前的计算结果，而不必再次执行函数
       
       watch特性
       1.观察的动作
       2.应用：监听props，$emit或本组件的值执行异步操作
       3.无缓存性，页面重新渲染时值不变化也会执行
    

13. computed和method的区别

       computed是响应式的，methods并非响应式。
       computed是带缓存的
       computed中的成员可以只定义一个函数作为只读属性，也可以定义get/set变成可读写属性，这点是methods中的成员做不到的
       computed是以对象的属性方式存在的，在视图层直接调用就可以得到值
    

14. 父子组件如何传值

       父组件通过 prop 给子组件下发数据，子组件通过$emit触发事件给父组件发送消息非父子关系的通过创建一个新的Vue实例，用于数据传递通过$on()绑定一个自定义事件、通过$emit()去触发这个事件并传参
    

15. 生命周期

       beforeCreate[创建实例之前]
       created[创建实例之后]
       beforeMount[挂载之前]
       mounted[挂载之后]
       beforeUpdate[数据更新之前]
       update[数据更新之后]
       beforeDestroy[销毁之前]
       destroy[销毁之后]
       activated[激活]
       deactivated[失活]
    

16. 第一次页面加载会触发哪几个生命周期钩子函数

       beforeCreate[创建实例之前]
       created[创建实例之后]
       beforeMount[挂载之前]
       mounted[挂载之后]
    

17. 自定义指令

       bind(el,binding); //指令第一次绑定到元素时调用,只调用一次
       inserted(el,binding); //被绑定元素插入父节点时调用
       update(el,binding); //被绑定元素所在的模板更新时调用
       unbind(el,binding); //只调用一次，DOM元素被VUE移除时调用(不可以手动解除绑定)
    

18. MVVM设计模式

    把Model和View关联起来的就是ViewModel。ViewModel负责把Model的数据同步到View显示出来，还负责把View的修改同步回Model