Vue基础

一、Vue实例

1.Vue中的选项对象

el -- 用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。                                  

//指定el的两种方式如下：
//创建Vue实例时指定
var vm = new Vue{
    el:"#app"
}
//通过$mount指定
vm.$mount('#app')

data -- 用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象。            

//data的第一种写法：对象式
data:{
    name:'尚硅谷'
} 

//data的第二种写法：函数式
data(){
    console.log('@@@',this) //此处的this是Vue实例对象
    return{
        name:'尚硅谷'
    }
}

methods -- vue中所管理的函数，methods中配置的函数不要用箭头函数，否则this指向的就不是vm。因为箭头函数并没有 this，this会作为变量一直向上级作用域查找，直至找到为止

computed -- 要用的属性不存在，要通过已有属性计算得来。

原理：底层借助了Objcet.defineproperty方法提供的getter和setter。

get函数什么时候执行？

        (1).初次读取时会执行一次。

        (2).当依赖的数据发生改变时会被再次调用。

优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。

备注：

        1.计算属性最终会出现在vm上，直接读取使用即可。

        2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。

computed:{
    fullName:{
	    //get有什么作用？当有人读取fullName时，get就会被调用，且返回值就作为fullName的值
		//get什么时候调用？1.初次读取fullName时。2.所依赖的数据发生变化时。
		get(){
			console.log('get被调用了')
			// console.log(this) //此处的this是vm
			return this.firstName + '-' + this.lastName
		},
	    //set什么时候调用? 当fullName被修改时。
		set(value){
			console.log('set',value)
			const arr = value.split('-')
			this.firstName = arr[0]
			this.lastName = arr[1]
		}
	}
}

watch -- 当被监视的属性变化时, 回调函数自动调用, 进行相关操作。监视的属性必须存在，才能进行监视！

//创建Vue实例时在watch属性中绑定
watch:{
    isHot:{
	    immediate:true, //初始化时让handler调用一下
	    //handler什么时候调用？当isHot发生改变时。
	    handler(newValue,oldValue){
	        console.log('isHot被修改了',newValue,oldValue)
	    }
    }
} 
//简写
isHot(newValue,oldValue){
	console.log('isHot被修改了',newValue,oldValue,this)
}
//通过$watch方法绑定
vm.$watch('isHot',{
	immediate:true, //初始化时让handler调用一下
	//handler什么时候调用？当isHot发生改变时。
	handler(newValue,oldValue){
		console.log('isHot被修改了',newValue,oldValue)
	}
})
//简写
vm.$watch('isHot',(newValue,oldValue)=>{
	console.log('isHot被修改了',newValue,oldValue,this)
})

深度监视：

         (1).Vue中的watch默认不监测对象内部值的改变（一层）。

         (2).配置deep:true可以监测对象内部值改变（多层）。

备注：

        (1).Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以！

        (2).使用watch时根据数据的具体结构，决定是否采用深度监视。

computed和watch之间的区别：

        1.computed能完成的功能，watch都可以完成。

        2.watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。

两个重要的小原则：

1.所被Vue管理的函数，最好写成普通函数，这样this的指向才是对应的组件实例对象。

2.所有不被Vue所管理的函数（如：定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数，这样this的指向才是vm 或 组件实例对象。

二、模板语法

1.插值语法

{{xxx}} -- 可以通过{{}}读取data中的变量，并解析后作为内容插入标签中。

2.指令语法

内置指令

v-text -- 向其所在的节点中渲染文本内容。
与插值语法的区别：v-text会替换掉节点中的内容，而{{xx}}是向节点中对应位置插入内容。

v-html -- 向指定节点中渲染包含html结构的内容。

与插值语法的区别：v-html会替换掉节点中所有的内容，{{xx}}则不会。v-html可以识别html结构。

严重注意：v-html有安全性问题！！！！在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。一定要在可信的内容上使用v-html，永不要用在用户提交的内容上！

v-cloak -- 本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性。使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题。

v-once -- v-once所在节点在初次动态渲染后，就视为静态内容了。以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。

v-pre -- 跳过其所在节点的编译过程。可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译。

条件渲染

v-if -- 切换频率较低的场景。不展示的DOM元素直接被移除。

注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”。

写法：

        (1).v-if="表达式"

        (2).v-else-if="表达式"

        (3).v-else="表达式"                                        

v-show -- 切换频率较高的场景。不展示的DOM元素未被移除，仅仅是使用样式隐藏掉

写法：v-show="表达式"                                     

备注：使用v-if的时，元素可能无法获取到（因为元素移除了），而使用v-show一定可以获取到（元素未被移除实现显示和隐藏了）。

列表渲染

v-for -- 用于展示列表数据

语法：v-for="(item, index) in xxx" :key="yyy"

可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）

面试题：react、vue中的key有什么作用？（key的内部原理）

虚拟DOM中key的作用：

 key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】,

 随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下：

对比规则：

(1).旧虚拟DOM中找到了与新虚拟DOM相同的key：

     ①.若虚拟DOM中内容没变, 直接使用之前的真实DOM！

     ②.若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM。

(2).旧虚拟DOM中未找到与新虚拟DOM相同的key 创建新的真实DOM，随后渲染到到页面。

用index作为key可能会引发的问题：

1. 若对数据进行：逆序添加、逆序删除等破坏顺序操作:

        会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。

2. 如果结构中还包含输入类的DOM：

        会产生错误DOM更新 ==> 界面有问题。

开发中如何选择key?:

       1.最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。

       2.如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用index作为key是没有问题的。

三、数据绑定

1.单向数据绑定

单向绑定(v-bind)：数据只能从data流向页面。v-bind:xxx可以简写为:xxx

2.双向数据绑定

双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data。

备注：双向绑定一般都应用在表单类元素上（如：input、select等），v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值。

Vue监视数据的原理

1. vue会监视data中所有层次的数据。

2. 如何监测对象中的数据？

通过setter实现监视，且要在new Vue时就传入要监测的数据。

(1).对象中后追加的属性，Vue默认不做响应式处理

(2).如需给后添加的属性做响应式，请使用如下API：

Vue.set(target，propertyName/index，value) 或vm.$set(target，propertyName/index，value)

3. 如何监测数组中的数据？

通过包裹数组更新元素的方法实现，本质就是做了两件事：

(1).调用原生对应的方法对数组进行更新。

(2).重新解析模板，进而更新页面。

4.在Vue修改数组中的某个元素一定要用如下方法：

        使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()

        Vue.set() 或 vm.$set()

特别注意：Vue.set() 和 vm.$set() 不能给vm 或 vm的根数据对象 添加属性！！！

过滤器

定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。

语法：

        1.注册过滤器：Vue.filter(name,callback) 或 new Vue{filters:{}}

        2.使用过滤器：{{ xxx | 过滤器名}}  或  v-bind:属性 = "xxx | 过滤器名"

备注：

        1.过滤器也可以接收额外参数、多个过滤器也可以串联

        2.并没有改变原本的数据, 是产生新的对应的数据

生命周期

1.又名：生命周期回调函数、生命周期函数、生命周期钩子。

2.是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数。

3.生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。

4.生命周期函数中的this指向是vm 或 组件实例对象。

beforeCreate -- 此时无法通过vm访问到data中的数据、methods中的方法（初始化生命周期、事件，但数据代理还未开始）

created -- 此时可以通过vm访问到data中的数据、methods中的配置的方法（初始化数据监测、数据代理）。

beforeMount -- 此时页面呈现的是未经Vue编译的DOM结构，所有对DOM的操作，最终都不奏效。

mounted -- 此时页面中呈现的是经过Vue编译的Dom，对DOM的操作均有效至此初始化过程结束。

beforeUpdate -- 此时数据是新的但是页面没更新，页面与数据未保持同步。

updated -- 此时数据是新的页面也更新了，页面与数据保持同步。

beforeDestroy -- 清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。

destroyed -- 销毁Vue实例后触发。