[前端笔记031]vue之hello、数据绑定、MVVM、数据代理、事件处理、计算属性和监视属性

前言

• 本笔记参考视频，尚硅谷:BV1Zy4y1K7SH p1 -p25
• 官网文档完善，本文只做笔记使用，
• 官网下载vue的开发版和生产版或者使用CDN，并去谷歌商店下载开发插件

简介

• 组件化模式，提高代码复用率，更好维护
• 声明式编码，与命令式编码相比，无需直接操作DOM，提高开发效率
• 虚拟DOM+diff算法，尽量复用DOM节点。
• hello world：
  0. 引入vue，前期用script标签引入，后期使用cli，npm
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  1. 准备好一个容器用于与vue绑定。
  2. 创建vue实例，

//容器里的代码呗称为【vue模板】，vue拿去解析并用 值 替代 {{}} 生成新的
<div id="root">
	<h1> hello {{name}} </h1> 
</div>
const vm = new Vue({ //构造函数里传配置对象
	el:'#root', //el用于指定当前实例绑定的容器，通常为CSS选择器字符串
	data:{ //data存储数据，供el指定容器使用，对象/函数
		name:'world'
	}
})

• 容器与vue实例一对一，{{}}中为js表达式(能表示值的JS代码)，1+1这种也是可以的，
• 使用{{ xxx }} 在标签体引入动态变化的数据（插值语法），xxx可以为函数，需要加括号；指令语法：标签中的v-bind等，将字符串中的内容当成js表达式。
• data中的数据发生改变，Vue会重新解析下模板，{{ }}里面的函数也会重新执行

数据绑定

• v-bind:，简写:，绑定数据。单向绑定
• v-model:，双向绑定；只能应用到表单类属性（输入类元素）上；默认对value进行优化，所以v-model:value=““可以简写为v-model=””

el与data的第二种写法

• el可以不写，使用vm实例的vm.mount(‘#root’)实现绑定，mount是Vue的方法，vm实例沿着原型链调用。
• data函数式写法，函数必须返回一个对象，对象中的为需要的数据；使用组件时必须使用函数式。且不能使用箭头函数，箭头函数的this是window，而普通函数的this是vue；data:function(){}，可以简写为data(){}

MVVM

• Model，对应data中的数据，一般js对象；view，模板页面，DOM；
• VM，ViewModel，Vue实例对象
• data中所有的属性，最后都出现在了vm身上，vm的所有属性，和Vue原型上的所有属性，在vue模板中都可以直接使用

数据代理

• Object.defineProperty()

 Object.defineProperty( 对象名,'对象属性',{ //配置对象
	 value:,
	 enumerabele:true, //控制属性是否可以枚举，默认false
	 writable:true, //控制属性是否可以被修改，默认false
	 configurabel:true //是否可以被删除，默认false
	 get(){ //当读取该属性时，get()会触发，返回值为age的值
		return 值变量
	}
	set(value){ 值变量=新值 } //修改值时，set会被调用，且会收到修改的具体值
})

• vue数据代理，通过vm对象代理对data对象中属性的操作
• 通过Object.defineProperty()实现，将data对象中的所有属性添加到vm上，为每个添加到vm上的属性，指定一个getter和setter

v-on，事件处理

• v-on:xxx 或 @xxx 绑定事件，xxx可以为事件回调配置在配置对象的methods中，也可以为简单的表达式
• @click=“fun”，与 @click="fun($event)"一致，后者能穿event以外的参数
• methods中的this为Vue（箭头函数时，为windows），methods中的方法无数据代理
• 事件修饰符:@click.xxx.xxx，xxx可以为事件修饰符，多个xxx时表示and
  1. prevent 阻止默认事件，比如a标签的跳转
  2. stop 阻止事件的冒泡，
  3. once 事件只触发一次，
  4. capture 使用事件的捕获模式，与冒泡相反
  5. self 只有event.target是当前操作的元素时才触发事件
  6. passive 事件的默认行为立即执行，无需等待事件回调执行完毕；正常流程是，事件触发，调用回调，执行默认行为比如滚动条滚动。
• 键盘事件，按键别名:@click.xxx.xxx，xxx可以为按键别名，多个xxx时表示and，Vue中常用的按键别名：
  1. 回车：enter
  2. 删除：delete (捕获“删除”和“退格”键)
  3. 退出：esc
  4. 空格：space
  5. 换行：tab (特殊，必须配合keydown去使用)
  6. 上：up
  7. 下：down
  8. 左：left
  9. 右：right
• 注意：系统修饰键（用法特殊）：ctrl、alt、shift、meta
  1. 配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发
  2. 配合keydown使用：正常触发事件
  3. 可以使用keyCode去指定具体的按键，比如：@keydown.13=“showInfo”，但不推荐这样使用
• 未提供别名的键，使用按键原始的key值去绑定，比如Enter，两个词的需要转化为断横线命名法
• Vue.config.keyCodes.自定义键名 = 键码，可以自定义按键别名

compute，计算属性

• vue配置对象中的属性，计算属性，需要通过已有属性计算得来。

computed:{
	fullName:{
		get(){ //这个地方的this，vue更改绑定到vm身上，使用返回值作为计算属性的值
			return this.firstName + '-' + this.lastName
		},
		set(value){
			const arr = value.split('-')
			this.firstName = arr[0]
			this.lastName = arr[1]
		}
	},
	fullName:{ //简写
		return this.firstName + '-' + this.lastName
	}
}

• 底层借助了Objcet.defineproperty()方法提供的getter和setter。
• get函数，1. 初次读取时会执行一次，之后读取会读取缓存2. 当依赖的数据发生改变时会被再次调用
• 计算属性最终会出现在vm上，直接读取使用即可，修改计算属性，使用set函数去响应修改，且set中要引起计算时依赖的数据发生改变

监视属性

• vue配置对象中的属性，监视属性，
• 当被监视的属性变化时，回调函数自动调用，进行相关操作
• 监视的属性必须存在，才能进行监视
• 监视有两种写法：1. 创建Vue时传入watch配置。2. 通过vm.$watch监视
• 深度监视：1. Vue中的watch默认不监测对象内部值的改变（一层）2. 在watch中配置deep:true可以监测对象内部值的改变（多层）3. Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以

watch:{
	//监视多级结构中所有属性的变化
    numbers:{
	    immediate:true, //刷新/初始加载时执行一次
		deep:true, //开启深度监视
		handler(){
			console.log('numbers改变了')
		}
   }
   //监视多级结构中某个属性的变化
	/* 'numbers.a':{
		handler(){
			console.log('a被改变了')
		}
	} */
}

• 如果监视属性除了handler没有其他配置项的话，可以进行简写

watch:{
	//正常写法
	isHot:{
		handler(newValue,oldValue){
			console.log('isHot被修改了',newValue,oldValue)
		}
	}, 
    //简写
    isHot(newValue,oldValue){
		console.log('isHot被修改了',newValue,oldValue,this)
	}
}
//正常写法
vm.$watch('isHot',{
   handler(newValue,oldValue){
        console.log('isHot被修改了',newValue,oldValue)
   }
})
//简写
vm.$watch('isHot',function(newValue,oldValue){
   console.log('isHot被修改了',newValue,oldValue,this)
})

• computed和watch之间的区别：
  1. computed能完成的功能，watch都可以完成
  2. watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作
• 两个重要的小原则：
  1. 所有被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或 组件实例对象
  2. 所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数，这样this的指向才是vm 或 组件实例对象。