vue3+ts笔记

监听vuex的值

如果用另一种格式写，记得一定要return

#方法一

<p>监听值取值 <span style="color:red">{{name}}</span></p>
<script setup lang='ts'>
//内置
import { ref, onMounted,watch} from "vue";
//状态vuex
import { useStore } from 'vuex'
const store = useStore()
//响应式数据
const name = ref(store.state.userInfo.name);
//监听
watch(()=>store.state.userInfo.name,(newVal, oldValue)=>{
    name.value =newVal;
})
</script>

方法二

<p>监听值取值 <span style="color:red">{{name}}</span></p>
<script setup lang='ts'>
//内置
import { ref, onMounted,watch} from "vue";
//状态vuex
import { useStore } from 'vuex'
let {state, commit,getters} = useStore();
//使用计算属性动态拿到vuex的值
let name = computed(() => {return state.name})
// let UserInfoNoParams = computed(() => getters['getStateCount'])
console.log(name,state.name,'哎');
//监听数据
 watch(name, (newVal, oldVal) => {
  console.log(name,"改变的值", toRaw(newVal));
  console.log("旧",oldVal);
},{immediate:true,deep: true});
</script>

监听补充

ref 用来声明响应式的基础类型的变量
reactive用来声明响应式的对象类型的变量
watch 引入watch对象，以便调用

	let infoList = reactive([
	      {
	        name:'张三',
	        value: '24'
	      },
	      {
	        name:'李四',
	        value: '25'
	      }
	    ])
  //监听1
	watch(infoList ,(newVal,oldVal)=> {
      console.log(newVal)
    }
    //监听2 watch 加载页面就触发
    watch(infoList ,(newVal,oldVal)=> {
      console.log(newVal)
     },
    {immediate:true})

    return {
		infoList,
	}

Api类型约束

<script setup lang="ts">
import { ref, reactive, computed } from 'vue'
 
type User = { 
  name: string
  age: number
}
 
// ref
const msg1 = ref('')  //  会默认约束成 string 类型，因为ts类型推导
const msg2 = ref<string>('')  //  可以通过范型约束类型
const user1 = ref<User>({ name: 'tang', age: 18 })  //  范型约束
const user2 = ref({} as User)  // 类型断言
 
// reactive
const obj = reactive({})
const user3 = reactive<User>({ name: 'tang', age: 18 })
const user4 = reactive({} as User)
 
// computed
const msg3 = computed(() => msg1.value)
const user5 = computed<User>(() => {
  return { name: 'tang', age: 18 }
})
</script>

defineProps

在 块中是没有组件配置项的，也就是说是没有 props 选项，需要使用 defineProps 来声明 props 相关信息。defineProps 接收的对象和组件选项 props 的值一样。

//1
const props = defineProps({
    options: Object,
})
//2
interface item {
    name: string,
    age: string
}
const props = defineProps({
  taskId: {
    type: String,
    default: '',
  },
  isReject: {
    type: Boolean,
    default: false,
  },
   list?: item[] // ?非必传参数
});
//3
import {  PropType } from "vue";
interface BreadCrumbItemType {
	  name: string;
	  path: string;
}
const props = defineProps({
	  breadCrumbInfo: {
	      type: Array as PropType<BreadCrumbItemType[]>,
	      default: () => []
	    },
	    caseSource: {
	    	type: Array as () => Array<any>,      
	     	default: () => [],
	 },
})

随便记录类型

interface imgItem {
  fileId: string,
  filePath: string,
  ocrText: string,
  fileName: string
}
interface provinceItem {
  areaCode: string,
  areaName: string
}
const state = reactive({
  docList: [] as imgItem[],//文件
  provinceList: [] as provinceItem[],//省份
})

vue3中watcherEffect和computed的原理

Vue 3 中 watchEffect 和 computed 都是响应式的工具，但它们的用途有所不同。

watchEffect 是用来自动追踪依赖并在依赖发生变化时执行一段副作用代码的。它不依赖特定的数据属性，而是在组合式API中用于管理副作用。

computed 是用来创建依赖于其他响应式数据源的计算值，这些值会在它们的依赖发生变化时自动更新。
题外话 (watch)
watch 非常好理解，他是一个函数，第一个参数要指定一个被侦听对象，第二个参数是回调函数，在被侦听的对象发生变化时，执行回调函数

watchEffect 的原理：
watchEffect 内部使用了 Reactive Effect 的概念。每当你调用 watchEffect 时，它都会创建一个新的 effect 函数，并立即执行它。在这个 effect 函数内部，Vue 会追踪其执行过程中访问的响应式数据属性。当这些属性发生变化时，Vue 会重新执行 effect 函数。
watchEffect 会在依赖的响应式数据发生变化时同样执行一个函数，但它不需要指定具体监听哪个属性。

computed 的原理：
computed 属性在内部是基于 watcher 实现的。当你创建一个 computed 属性时，Vue 会创建一个 watcher 来追踪其依赖，并且当依赖变化时，它会重新计算 computed 值。

// watchEffect 示例
import { watchEffect } from 'vue';
 
setup() {
  const count = ref(0);
 
  watchEffect(() => {
    console.log(`Count is: ${count.value}`);
  });
 
  return {
    count
  };
}
 
// computed 示例
import { computed, ref } from 'vue';
 
setup() {
  const count = ref(0);
  const doubledCount = computed(() => count.value * 2);
 
  return {
    count,
    doubledCount
  };
}

vue怎么做到样式隔离

1.作用域样式（Scoped Styles）
2.CSS Modules

Vue 支持使用 CSS Modules 来实现样式的模块化和隔离。 在 Vue 单文件组件中，可以借助 module 特性启用 CSS > Modules 功能，在样式文件中使用类似 :local(.className) 的语法来定义局部样式。 CSS Modules > 会自动生成唯一的类名，并在编译时将类名与元素关联起来，从而实现样式的隔离和局部作用域。

3.命名约定

可以通过使用特定的命名约定来实现样式的隔离。 为了避免样式冲突，可以采用特定的命名规则或前缀，命名规范或基于组件名称的前缀。 通过在样式类名中添加前缀或特定的命名约定，可以减少样式冲突的可能性。

4.CSS-in-JS 方案

Vue 也可以结合 CSS-in-JS 库（如 styled-components、emotion 等）来实现样式的隔离。
使用这种方式，可以直接在组件代码中编写样式，并通过 JavaScript 对象或模板字符串的形式动态生成样式。 CSS-in-JS
方案将样式与组件紧密关联，实现了更高程度的样式隔离和可重用性。