vue基础用法

1. vue指令 (0). vue文本渲染三种方法 {{}}、v-text、v-html

1. {{ }}将元素当成纯文本输出
2. v-html
   v-html会将元素当成HTML标签解析后输出
3. v-text
   v-text会将元素当成纯文本输出

    
    


    

     	
      	
{{hello}}
        

        

    





/
	let vm = new Vue({
		el:'#app',
		data:{
			checked:true
		}
	})
	

v-if和v-show的区别：

1. 当初始条件不成立时，v-if不会渲染DOM元素；不管初始条件是什么，v-show总会渲染元素，但是只是简单地基于 CSS 的display:none进行切换，设置当前DOM的显示和隐藏。
2. 一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

(4). 列表循环指令----v-for

• 为什么使用Key:
  key是每一个vnode的唯一id，可以根据key，更准确， 更快的找到对应的vnode节点，diff算法中通过tag和key来判断是不是sameNode，如果是相同的节点，就不需要再次渲染了，使用key可以减少渲染次数，提升渲染效率。一般使用一个与业务相关的id作为key 值,而不使用 index，因为如果使用index作为key值，以前的数据和重新渲染后的数据随着 key 值的变化从而没法建立正确关联关系,导致 Vue 会复用错误的旧子节点，做很多额外的工作，这就失去了 key 值存在的意义.

(5). 给元素绑定事件 ---- v-on

v-on用于给元素绑定事件，v-on:事件名 可以简写为 @事件名

	//1. 直接绑定事件
    click me
    
    click me
    //2. 绑定事件类
    click me
  

v-on的事件修饰符

1. stop：停止冒泡

   
       aaa
       
       
   bbb
   
   

2. prevent：阻止默认行为

3. capture

   
   
   ...
   

4. once：只会触发一次

5. 监听某个键盘的键帽

6. 修饰符可以串联

2. computed / watch

• computed 、 watch 的区别

  1. computed 计算属性 : 依赖其它已存在的属性而定义的新的属性值,并且 computed 的值有缓存,只有它依赖的属性值发生改变,下一次获取 computed 的值时才会重新计算 computed 的值。

  2. watch 侦听器 : 对已经存在的属性进行监听，每当监听的数据变化时才会执行，进行后续操作。没有缓存性。

• computed是怎么收集依赖的

• 对watch的理解

Vue中的watch如何深度监听某个对象

watch除了监听data里的属性,也可以监听计算属性或者一个函数的计算结果。

• 深度监听对象的两种方式：

1. 字符串嵌套方式

   export default {
       data () {
           return {
              a: {
                  b: {
                      c :'张三'
                  }
              }
           }
       },
       watch: {
           //想监听 c  此时数据比较深   深度监听
           "a.b.c": function (newValue, oldValue) {
               
           }
       } 
   }
   

2. 启用深度监听方式

    export default {
          data () {
              return {
                 a: {
                     b: {
                         c :'张三'
                     }
                 }
              }
          },
          watch: {
              a: {
              	   // deep 为true  
              	   //意味着开启了深度监听 
              	   //a对象里面任何数据变化都会触发handler函数
                  deep: true ,
                  handler(){
                     // handler是一个固定写法
                  }
              }
          }    
     }    
   

3. vue组件化

• 组件中的data为什么是一个函数？
  一个组件被复用多次的话，也就会创建多个实例。本质上，这些实例用的都是同一个构造函数。如果data是对象的话，对象属于引用类型，会影响到所有的实例。所以为了保证组件不同实例之间的data不冲突，data必须是一个函数。

组件之间通信的方法： 1.父子组件通信

(1). 父组件向子组件传值 ------ props，props 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。这是为了防止子组件无意修改父组件的状态。
例：
子组件

父组件

(2). 子组件向父组件传值 ------ $emit()自定义事件
例：
子组件

父组件

2. 非父子组件 ----- $emit()和 $on

原理：new 一个新的vue实例，类似于一个站，连接着两个组件，也就是一个中央事件总线；

$on : 监听当前实例上的自定义事件(此处当前实例为 bus，自定义事件是userDefinedEvent ) 。 事件由 $emit触发，回调函数会接收所有传入事件触发函数( $emit)的参数。

3. vuex

vuex知识点

4. vue生命周期

vue生命周期是指vue实例对象从创建之初到销毁的过程

◾详细描述：

1. beforeCreate: 用于初始化非响应数据，此时还不能访问到data、methods、computed、watch里面的数据和方法。
2. created: vue实例创建完成，已经完成数据和方法的初始化，此时可以访问到data、methods、computed、watch里面的数据和方法了；
3. beforeMount:模板已经在内存中编译好了，但尚未挂载到页面中去。
4. mounted:DOM渲染完成，实例挂载到DOM上，此时可以获取到DOM节点并对其进行操做了。
5. beforeUpdate: data中的数据是最新的，但页面还是旧的，页面尚未和数据保持同步；
6. updated: 页面和data中的数据同步了，都是最新的。
7. beforeDestroy: vue实例进入销毁阶段，但还没有真正执行销毁的过程，此时实力上所有的数据和方法等都还处于可用状态，该过程常用于销毁定时器、解绑全局事件、销毁插件对象等操作；
8. destroyed:vue实例已被销毁,该vue示例中的所有东西都不可用了；

◾考虑父子组件的生命周期执行顺序：

• 实例初始化过程： 父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted
• 子组件更新过程： 父beforeUpdate->子beforeUpdate->子updated->父updated
• 父组件更新过程 父beforeUpdate->父updated
• 销毁过程 父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

◾keep-alive 独有的生命周期，分别为 activated 和 deactivated 。用 keep-alive 包裹的组件在切换时不会进行销毁，而是缓存到内存中并执行 deactivated 钩子函数，命中缓存渲染后会执行 actived 钩子函数