Vue 学习笔记 3.0 --- 零散知识点

一 : 数据响应(数据劫持)

1. 凡是在data 里声明的属性,都会正常的进行数据响应(数据劫持)
2. 如果手动的添加一个属性并且赋值,无法进行正常的数据响应
3. 解决方法: this.$set(this.obj, ’ 属性名 ’ , ’ 属性值 ')
4. 以后先在data里声明数据,并且最好给一个初始值,再去做其他使用

二 : key

1. 说明 :
   Vue 中推荐, 在使用 v-for 的时候,添加 key 属性

   看官网

2. 介绍就地复用

<!-- 显示组件 -->
<p v-for="(item,index) in list" :key="index">
	{{ item.name}} <input type="text" />
</p>
<!-- 数据 -->
data: { list : [ { id : 1, name : '老罗' }, { id : 2, name : '涛涛' }, { id : 3,
name : '聪聪' } ]
<!-- 演示  -->
vm.list.unshift({id:4,name:'马哥'})

1. 怎么使用 key

   3.1 如果数组里的元素不是对象,并且又不会改变数组的顺序的话 => :key='index'
   
   3.2 如果数组里的元素是对象,,使用对象里的固定属性,并且是唯一, id 
   
   3.3 语法 : :key='item.id'
   
   3.4 以后,写了v-for之后,立马写好 :key
   
   

2. 完善 TodoMVC + key

三 : 事件修饰符

1. .prevent 阻止默认行为

2. 一般用在 a标签阻止跳转默认行为 , 相当于 : e.preventDefault()

   .prevent 阻止默认行为，调用 event.preventDefault() (常用)
   @click.prevent = 'fn'
   

3. 其他不常用事件修饰符 :

   - .stop 阻止冒泡，调用 event.stopPropagation()
   - .capture 添加事件侦听器时使用事件捕获模式
   - .self 只当事件在该元素本身触发时，才会触发事件
   - .once 事件只触发一次
   

四 : 异步 DOM 更新 ( 面试 )

1. Vue 中采用了 异步DOM更新 的机制
2. 如何更新页面?

• 数据发生改变后, vue 没有立即将数据的改变更新到视图中,

• 而是等到数据不再变化的时候 一次性的 将 数据的改变更新到视图中

   //1. 验证了
   for (let i = 0; i < 1000; i++) {
       this.count++
   }
  

3. 为什么是异步 DOM 更新?

• 性能的考虑
• 因为对于前端来说, 修改数据进行 DOM 操作是常有的事情,如果频繁操作 DOM,会严重影响页面的加载性能
• DOM 操作这是前端的性能的瓶颈
• 比如 : for (let i = 1; i < 10000; i++>) 如果同步 就要重新渲染 1000 次

4. 验证 异步 DOM 更新 :

 //2. 直接获取data 中的值 ,会立马获取成功
console.log(this.count)
this.count++
console.log(this.count)

// 但是 通过dom来获取count的值,因为DOM更新这个count值是异步的,是需要一点时间的
console.log(this.$el.children[0].innerText) // 0
this.count = 100
console.log(this.$el.children[0].innerText) // 0

5. 需求 : 在数据更新后,立即获取到更新后的内容???>

DOM 更新后,会执行 this.$nextTick() 的回调函数,所以能拿到值

// setTimeout(() => {
//      console.log(this.$el.children[0].innerText)
//   }, 1000)
this.$nextTick(() => {
  console.log(this.$el.children[0].innerText) // 100
})

五 : 监听 watch

1. 说明 : Vue 中可以通过 watch 配置项,来监听 vue 实例中数据的变化

2. 基本使用

   watch: {
       // 监听name属性的数据变化
       // 作用 : 只要name的值发生变化,这个方法就会被调用
       // 第一个参数 : 新值
       // 第二个参数 : 旧值,之前的前
       name(newVal,oldVal){
               console.log('新 :',newVal);
               console.log('旧 :',oldVal);
       }
   }
   

3. 基本使用案例 :
   需求 : 监听用户名文本框字符个数(3-6),并显示格式验证

<input type="text" v-model="name" />
<span v-show="isShow">用户名的字符 在 6-12之间</span> if
(/^[0-9a-zA-Z]{3,6}$/.test(newVal)) { 验证 }

4. 监听对象 (数组也属于对象)

// data :
 data: {
   obj: {
   name: 'zs'
   }
},
// 组件
<input type="text" v-model="obj.name" />
// 监听

5. 开始监听对象的属性

// 从对象的角度来监听的
 因为对象和数组都是引用类型,引用类型变量存的是地址,地址没有变,所以不会触发watch
obj:{
    // 深度监听 属性的变化
    deep:true,
    // 立即处理 进入页面就触发
    immediate: true,  
    // 数据发生变化就会调用这个函数  
    handler( newVal ) {
      console.log( newVal.name );
     }
  },
 // 从属性的角度来监听
 'obj.name' ( newVal ) {
      console.log('监听对象的属性',newVal);
 }

六 : TodoMVC 数据持久化

需求 : 将todoMVC中的数据,保存到 本地存储中 (本地持久化)

1. 何时存储数据?

   因为功能中的 CRUD 都会修改 list 数据,所以,只要 list 数据发生改变,就要保存到本地存储中;
   方法一 : 在 CRUD 中 分别调用保存数据的方法,(不推荐 太繁琐)
   方法二 : 想办法监听 list 数据的改变,只要 list 数据变了, 就调用保存数据的方法

   可以使用 vue 的 watch 监听 list 的数据改变

2. 存储值

   监听数组和监听对象一样 需要深度监听
   保存值,记得把对象转化为字符串(存的快 省空间)
   localStorage 本地存储

   // 监听
   watch: {
     // 监听list
     todoList: {
        deep: true,
        handler(newVal) {
           // console.log('发生变化了', newVal)
           // 保存起来
           localStorage.setItem('todoList', JSON.stringify(newVal))
        }
     }
   },
   

3. 取值 , 在 data 中可以初始值

   记得给一个默认值 空数组 []

   const todoList =  JSON.parse(localStorage.getItem('todoList') || '[]')