VUE学习（二）VUE3代码组织方式

VUE学习（一）

继续学习VUE

一、  Composition API + <script setup>

在 Composition API 的语法中，所有的功能都是通过全局引入的方式使用的，并且通过 <script setup> 的功能，我们定义的变量、函数和引入的组件，都不需要额外的生命周期，就可以直接在模板中使用。

Composition API 组织代码的方式，我们可以任意拆分组件的功能，抽离出独立的工具函数，大大提高了代码的可维护性。

<template>
  <div>
    <h1 @click="add">{{count}}</h1>
  </div>
</template>

<script setup>
import { ref } from "vue";
let count = ref(1)
function add(){
    count.value++
}
</script>

<style>
h1 {
  color: red;
}
</style>

使用 template 标签放置模板、script 标签放置逻辑代码，并且用 setup 标记我们使用 <script setup> 的语法，style 标签放置 CSS 样式。

在 <script setup> 语法中，使用引入的 ref 函数包裹数字，返回的 count 变量就是响应式的数据，使用 add 函数实现数字的修改。需要注意的是，对于 ref 返回的响应式数据，需要修改 .value 才能生效，而在 <script setup> 标签内定义的变量和函数，都可以在模板中直接使用。

---

对于.value，官方是这样解释的：
      将值封装在一个对象中，看似没有必要，但为了保持 JavaScript 中不同数据类型的行为统一，这是必须的。这是因为在 JavaScript 中，Number 或 String 等基本类型是通过值而非引用传递的：在任何值周围都有一个封装对象，这样我们就可以在整个应用中安全地传递它，而不必担心在某个地方失去它的响应性。

VUE3.2后用了$ref代替ref，就可以不用到处都是.value了，解决了这个痛点。

---

TodoList.vue 代码块中加入下面的代码：

<template>
  <div>
    <input type="text" v-model="title" @keydown.enter="addTodo" />
    <button v-if="active < all" @click="clear">清理</button>
    <ul v-if="todos.length">
      <li v-for="todo in todos">
        <input type="checkbox" v-model="todo.done" />
        <span :class="{ done: todo.done }"> {{ todo.title }}</span>
      </li>
    </ul>
    <div v-else>暂无数据</div>
    <div>
      全选<input type="checkbox" v-model="allDone" />
      <span> {{ active }} / {{ all }} </span>
    </div>
  </div>
</template>

<script setup>
import { ref,computed } from "vue";
let title = ref("");
let todos = ref([{title:'学习Vue',done:false}])

function addTodo() {
...
}
// filter方法：保留filter(true)的数据
function clear() {
  todos.value = todos.value.filter((v) => !v.done);
}
let active = computed(() => {
  return todos.value.filter((v) => !v.done).length;
});
let all = computed(() => todos.value.length);
let allDone = computed({
  get: function () {
    return active.value === 0;
  },
  set: function (value) {
    todos.value.forEach((todo) => {
      todo.done = value;
    });
  },
});
</script>

  computed 的用法是单独引入使用。

---

注：filter方法：保留filter(true)的数据

filter() 方法用于对数组进行过滤。创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。

注意： filter() 不会对空数组进行检测。

注意： filter() 不会改变原始数组。

---

<template>
    <h1>这是首页</h1>
    <TodoList />    
</template>

<script setup>
import TodoList from '../components/TodoList.vue'
</script>

通过这种方式，你可以实现对业务逻辑的复用。这样做的好处就是，如果有其他页面也需要用到这个功能，可以直接复用过去。

//mouse.js
import {ref, onMounted,onUnmounted} from 'vue'

export function useMouse(){
    const x = ref(0)
    const y = ref(0)
    function update(e) {
      x.value = e.pageX
      y.value = e.pageY
    }
    onMounted(() => {
      window.addEventListener('mousemove', update)
    })
  
    onUnmounted(() => {
      window.removeEventListener('mousemove', update)
    })
    return { x, y }
}

import {useMouse} from '../utils/mouse'

let {x,y} = useMouse()

因为 ref 和 computed 等功能都可以从 Vue 中全局引入，所以可以把组件进行任意颗粒度的拆分和组合，这样就大大提高了代码的可维护性和复用性。

使用 <script setup> 可以让代码变得更加精简，这也是现在开发 Vue 3 项目必备的写法。<script setup> 还有其它一些很好用的功能，比如能够使用顶层的 await 去请求后端的数据等等

 二、Style样式的特性

<style>里也能用 v-bind！！

在 style 标签上，当我们加上 scoped 这个属性的时候，定义的 CSS 就只会应用到当前组件的元素上，这样就很好地避免了一些样式冲突的问题。

<style scoped>
h1 {
  color: red;
}
</style>>

这样写，组件就会解析成下面代码的样子。标签和样式的属性上，新增了 data- 的前缀，确保只在当前组件生效。

<h1 data-v-3de47834="">1</h1>
<style scoped>
h1[data-v-3de47834] {
    color: red;
}
</style>

 如果在 scoped 内部，你还想写全局的样式，那么你可以用:global 来标记，这样能确保你可以很灵活地组合你的样式代码。而且我们甚至可以通过 v-bind 函数，直接在 CSS 中使用 JavaScript 中的变量。

示例：

 在 script 里定义了一个响应式的 color 变量，并且在累加的时候，将变量随机修改为红或者蓝。在 style 内部，我们使用 v-bind 函数绑定 color 的值，就可以动态地通过 JavaScript 的变量实现 CSS 的样式修改，点击累加器的时候文本颜色会随机切换为红或者蓝。

<template>
  <div>
    <h1 @click="add">{{ count }}</h1>
  </div>
</template>

<script setup>
import { ref } from "vue";
let count = ref(1)
let color = ref('red')
function add() {
  count.value++
  color.value = Math.random()>0.5? "blue":"red"
}
</script>

<style scoped>
h1 {
  color:v-bind(color);
}
</style>>