VUE3&PROJECT DAY03

ref与reactive的使用

<script setup>
    const movie = reactive({id:1, name:'如果声音不记得'})
    const count = ref(10)
    const ary = ref([1,2,3,4,5])
    const m = ref({id:1, name:'如果声音不记得'})
</script>

对于ref方法：

1. 如果使用ref处理基本类型的数据，底层使用Object.defineProperties实现数据的监听。在js代码中使用数据时，需要.value:

   const count = ref(10)
   count.value  // 得到10
   

2. 如果使用ref处理数组或对象类型的数据，底层使用Proxy，相当于reactive():

   // 相当于： const ary = reactive({value: [1,2,3,4,5]})
   const ary = ref([1,2,3,4,5])
   // 相当于： const m = reactive({ value:{id:1, name:'如果声音不记得'} })
   const m = ref({id:1, name:'如果声音不记得'})
   
   ary.value    // 得到代理的数组： [1,2,3,4,5]
   m.value      // 得到代理的对象： {id:1, name:'如果声音不记得'}
   

3. 如果使用reactive直接处理对象，底层使用Proxy代理监听对象的变化：

   const movie = reactive({id:1, name:'如果声音不记得'})
   movie.id  
   movie.name  
   

4. 针对数组类型：

   <div v-for="item in movies" :key="item.id"></div>
   

   const movies = ref([])   //  reactive({value:[]})
   movies.value = [1,2,3,4,5]
   

   const movies = reactive([])
   movies.push(...[1,2,3,4,5])
   

实现切换顶部导航时，更新列表

业务需求：当切换顶部导航时，获取当前选中的类别ID，发送请求，加载新电影列表，替换掉当前列表。

实现步骤：

1. 控制顶部导航选中状态的是一个变量：const navActive。这个变量的值决定了哪一个导航项是选中状态。navActive的可选值，3个： [1 热映, 2 待映, 3 经典]
2. 通过watch监听navActive的变化，监听到改变后，将navActive的值当做当前选中项类别的ID带着一起发请求即可。
3. 重新替换电影列表。

实现列表的触底加载下一页

业务需求：每当滚动到当前页面的末尾，触发事件，发送请求，访问下一页数据，将新数组追加到旧数组的末尾。

实现步骤：

1. 通过vant的<van-list>组件，来完成触底事件的监听。

   <van-list v-model:loading="loading"
             :finished="finished"
             finished-text="已经到底了，木有数据了"
             @load="onLoad">
   </van-list>
   

2. 在onLoad方法中，发送请求，访问下一页的数据。与此同时，需要处理两个变量的值：

   const loading = ref(false)
   const finished = ref(false)
   

移动应用的缓存设计方案

当应用需要数据时，就应该发送请求，找服务端获取。但是有一些数据，他们的数据量不小，全局基本没有什么变化，访问量还挺频繁，这些数据如果每次都需要发http请求去服务端获取，将造成服务器的压力。这是，可以考虑做一下数据缓存。

数据缓存业务流程：

1. 发送请求，获取这一组数据。拿到数据后，记得把数据向缓存中存一份。
2. 当下次发送请求之前，先去缓存中看一眼有没有，有的话就直接用了，不再发送请求。如果缓存中没有数据，则再发送请求。

在浏览器的环境下，可以使用sessionStorage与localStorage来实现数据的缓存。

相关API：

向storage中存储数据：

let list = []
sessionStorage.setItem('1', JSON.stringify(list))
localStorage.setItem('1', JSON.stringify(list))

从storage中读取数据：

let str = sessionStorage.getItem('1') 
let list = JSON.parse(str)

考虑缓存何时更新

如果缓存不更新，每次从缓存中获取的数据都是旧数据。所以应该给应用数据提供一个合理的缓存更新机制。

1. 将缓存存入sessionStorage（关了浏览器就没了），下次访问就是新数据。
2. 将缓存存入localStorage （永久存储）后，每次加载时判断是否符合更新缓存的条件，如果符合条件则重新发送请求去更新缓存数据。例如如下条件：
   1. 缓存中的数据是否是当天下午四点以后更新的最新的数据。
   2. 定时器，每隔5分钟更新一次。
   3. 实现列表的下拉刷新。

实现列表的下拉刷新

实现电影详情页的显示

业务需求：当用户在首页点击其中某一个列表项时，跳转到详情页。并且携带选中项的电影ID一起跳转。到详情页后显示该电影的详细信息。

实现步骤：

1. 准备好电影详情页静态页面。
2. 配置路由，当访问：/movie-detail/:id时，跳转到详情页。
3. 在详情页中接收参数id，带着该电影id，发送http请求，加载电影详情数据。
4. 在页面中完成数据显示。