vue文档细读 v-for、v-if、事件修饰符（.passive 和 .prevent）

孩子长大了！！！
本来想跟以前一样看教程视频，发现有点无聊，然后就看起了文档

v-for

1. 可以遍历对象：

官网链接
value为值，name为键，index为索引，按顺序写

	<div v-for="(value, name, index) in object">
	  {{ index }}. {{ name }}: {{ value }}
	</div>
	<script>
		new Vue({
		  el: '#v-for-object',
		  data: {
		    object: {
		      title: 'How to do lists in Vue',
		      author: 'Jane Doe',
		      publishedAt: '2016-04-10'
		    }
		  }
		})
	<script>

结果：
0.title:How to do lists in Vue
1.author: Jane Doe
2.publishedAt:2016-04-10

2. 对data数组增删改查

官网链接

<script>
		new Vue({
		  el: '#v-for-object',
		  data: {
		    arrList:[{
		      name: 'kiki',
		      age:15
		    },{
		      name: 'mimi',
		      age:15
		    },{
		      name: 'xixi',
		      age:15
		    },{
		      name: 'lili',
		      age:15
		    }]
		  }
		})
	<script>

需求：修改第一个的 name为‘阿晴’,age为18
maybe是这样改的：

• 方式一：（可以实现）

  this.arrList[0].name = '阿晴'
  this.arrList[0].age = 18
  

• 方式二：（界面没有反应，控制台数据已经被修改）

  this.arrList[0] = {
   	name: '阿晴',
  	age: 18
  }
  

  失败原因？界面数据会跟随数据的改变是因为数据已经被双向绑定，而this.arrList[0]并没有被绑定，所以即使修改了视图也不会进行修改
  如何解决？
• 方法一：

this.arrList.splice(0,1,{	
		name: '阿晴',
		age: 18
	}
)

• 方法二：

  Vue.set(this.arrList, 0, {	
  		name: '阿晴',
  		age: 18
  	}
  )
  

• 方法三

  this.$set(this.arrList, 0, {	
  		name: '阿晴',
  		age: 18
  	}
  )
  

2. 数组修改后重新赋值并不会极大消耗性能

官网链接
这个在之前困扰了我好久，居然在这里看到了~

3. v-if和v-for不能一起用的解决方法：

官网链接

为什么不能一起用？

我反复看了官网，再去看看别的文章的解析，根据我的理解做出了解读,不知是否正确：
v-for会走一遍逻辑，走完了v-if也会走一段逻辑，如果用在同个元素上，它就会重复的去走这个逻辑
有些文章可能是比较早写（vue3出之前）的，并没有提到vue3在v-for和v-if的优先级上的改变，上面的两个官网截图可以看出

优先级：
vue2：v-for > v-if

• 这意味着 v-if 将分别重复运行于每个 v-for 循环中。当你只想为部分项渲染节点时，这种优先级的机制会十分有用

vue3：v-if > v-for

• 这意味着 v-if 将没有权限访问 v-for 里的变量

为什么要这么改？
一开始有点不理解v-if没有权限访问v-for的变量是什么意思，看到了篇文章：

所以说，尽管vue2的优先级设计有他的作用，但是为了性能，vue3中选择放弃原来的功能，通过提高v-if的优先级直接杜绝了这个事情的发生,直接不让渲染：

  !!!vue3中会报错！！！
 <li v-for="item in arr" v-if="!item.done" :key="item.id">
     <span>{{item.task}}</span>
 </li>

那要怎么解决？

之前看到的文章都是说，在渲染之前将数据处理好，再循环；
脑瓜子不太灵光，一直觉得，这也太麻烦了吧。。。
直到我看到了！！v-for可以用计算属性处理数据？好像？？可以解决先解决后渲染的问题？

点了点v-if和v-for的官网介绍，发现官网也是推荐的用计算属性的方法！！

.passive 和 .prevent事件修饰符

官网链接

• 二者不能一起用,.prevent会被掩盖
  
• passive：恢复被阻止的默认行为
  
• prevent：阻止默认行为，比如说a标签的点击跳转行为、form提交后会重载页面
  

好吧写不动了先这样~