vue动态绑定class与vue3组合API

vue提供动态绑定class的方法，是根据属性控制控制class的显示与隐藏。

testStyle,testStyle2是类名，是否在元素中引用该类，取决于后面的方法（属性）传递回来的值（true 或 false）

<template>
  <div>
    <div :class="{testStyle:testComputed}">123</div>
    <div :class="{testStyle2:testMethod}">456</div>
    
    <!-- 传递参数,推荐使用methods控制,computed需要写闭包 -->
    <div v-for="(item, index) in tableData" :key="index" :class="{testStyle:testComputed2(item)}">123</div>
    <div v-for="(item, index) in tableData" :key="index" :class="{testStyle2:testMethod2(item)}">123</div> 
  </div>
</template>
 
<script>
export default {
  name: "computed",
  data() {
    return {
      test: false,
      tableData: [true, false, true],
    };
  },
  methods: {
    testMethod() {
      return true;
    },
    testMethod2(flag) {
        return flag;
    }
  },
  computed: {
    testComputed: () => {
        return true;
    },
    testComputed2: () => {
        return item => {
            return item;
        }
    }
  },
};
</script>
 
<style lang="scss" scoped>
.testStyle {
  color: red;
}
.testStyle2 {
  color: blue;
}
</style>

如果需要在绑定的方法中传递参数，推荐写到methods中，这种方式的代码更加简洁易懂。使用computed传参用到了闭包

Vue3组合API-----setup()

1.Vue3最重要的新特性之一:

作用：

之前vue对象规定了我们必须把某一类数据放到某一个结构中，这样在一定程度上对我们的代码进行了强制的分割。而在vue3 中我们引入了setup（）合成API语法，他可以将某数据关联的内容都整合到一个部分，即使setup（）中的内容越来越多，也会围绕着大而不乱的形式开发项目。

2.setup组合api特点：

（1） 更加直观，接近原生js

（2） 按需加载

（3）没有this，降低了耦合性，提高复用性

 3.setup（）:

(1)setup（）结构中定义的变量，函数都需要return之后才可以在模板中使用，

(2).setup（）是处于created生命周期之前的函数，也就是说data，methods中的数据是无法访问到的，setup（）结构中的this指向

undefined ref ：在setup中只能包装字符串或数字形式的数据（值），使其变为响应式数据   （3）setup函数只能是同步的不能是异步的。

1.setup 组件选项：

• 新的 setup 选项在组件创建之前执行，一旦 props 被解析，就将作为组合式 API 的入口。

• setup 中避免使用 this , setup的调用 在 data 、methods、computed 解析之前

• setup 选项是一个接收 props 和 context 的函数

• 将setup 返回的函数 暴露给 组件的其余部分 （计算属性、方法、生命周期）

 2.ref值类型 响应对象：

refs： 可以直接在html模板中使用对象的属性名当变量，不需要用 . 访问 ，实现对简单值的监听

ref注意点：

   -在vue（template）中使用ref的值不用通过value获取

   -在TS中使用ref的值必须通过value获取

const count = ref(5)，在setup访问count值，count.value 来访问

3.reactive 引用类型 响应式：

reactive： 在setup中包装对象，数组形式的数据（对象/数组），使其变成响应式数据

reative注意点：

   -reative参数必须是对象（json/array）;

   -如果给reactive传递了其他对象

   -默认情况下修改对象，界面不会自动更新

   -如果想更新，可以通过重新赋值的方式

const list = reactive(默认值)x

list = xxx  直接赋值破坏了引用√

list.push(xxx)

4. ref和reactive的区别：

vue在解析数据之前，会自动判断在template里使用的数据是否是ref类型的，如果是，vue自动添加.value

如果在templatel里使用的是reactive类型的数据，则vue不会自动添加.value。