2.Vue学习记录（数据劫持和数据代理、键盘事件、计算属性computed、监视属性watch）

2022-11-03
数据劫持和数据代理：
        1.数据代理和数据劫持其实同一种，vue实现数据代理是使用object.defineproperty（）方法，vue中data的调用就是用的数据代理；
        2.事件：
            2.1 点击事件：两种写法（@click=“函数名（）”，v-on：click=“函数名（）”），其方法要写在vm对象的methods属性中；
            2.2 事件修饰符：1.prevent：阻止默认事件，2.stop：阻止事件冒泡，3.once：事件只触发一次，
                        4. capture：使用事件的捕获模式，5.self：只有event.target是当前操作的元素时才出发事件，6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕。

2022-11-06
键盘事件：
        1.键盘事件的写法：@keyup/@keydown.“按键名”，
        2. 常用的按键名：（enter，delete，esc，space，tab，up，down，left，right）
        3. 不常用的可以使用：console.log(e.key/e.keycode)，如果是多个单词组成全都要小写并且单词之间使用连接符
        4.特殊按键tab键：一般tab键都结合@keydown使用
        5.特殊按键ctrl、alt、shift、meta：这几个键配合其他按键使用@keyup，如果自己单独使用@keydown，系统修饰符可以指定后面跟的字符如：@keyup.ctrl.f(快捷键的写法)
2022-11-08
计算属性computed：
        1.定义：通过已有的属性计算得来，
        2.原理：底层主要依靠object.defineproperty方法提供的getter和setter方法，
        3.get函数的执行：当初次被读取或所依赖的属性发生修改，
        4.优势：与method相比有缓存机制可以提高效率，
        5.备注：计算属性是在vm对象身上的属性，如果要对计算属性进行修改那必须写set方法，
        6.简写：computed：{fullname（）{}}（仅函数仅有get函数时可以这样简写，需要修改值时必须按标准方式写）。
监视属性watch：
        1.@xxx（如click）=“可以写表达式”
        2.两种书写方式：vm对象里面直接watch：{属性名：{handler（两个参数第一个是新数据，第二个是原来的数据）：{写需要的操作}}}，
                vm对象外面的书写vm.$watch("属性",{和内置的里面一致})，
                其中的属性值：immediate:true,//初始时是否要执行
        3.深度监视：deep，需要进行深度监视时应把deep：值改成true
        4.简写：当没有其他配置项时可以使用简写watch：{属性名（参数）{写操作}}
        5.监视属性可以做计算属性做的操作，但计算属性无法做监视属性的一些操作，例如：异步操作。