vue3知识积累

🐱‍🐉nextTick

import { nextTick } from "vue";
nextTick(() => {
      
});

插槽

  <template v-slot:header>

🐱‍🐉 watch 需要放在最下面，如果调用放在watch 下面的方法 会调用不到，产生报错。

watch(
  () => cesiumAttrsStore.currentClickBuilding,
  (val) => {
    val && getData(val)
  }
);

🐱‍🐉变量取值

1、data——唯一需要注意的地方
整个 data 这一部分的内容，你只需要记住下面这一点。

以前在 data 中创建的属性，现在全都用 ref() 声明。

在 template 中直接用，在 script 中记得加 .value 。

🐱‍🐉props

const props = defineProps({
  propData: {
    type: Array,
    default: () => {
      return []
    }
  },
 
})
//使用 props.propData

🐱‍🐉emits

const emits = defineEmits(['changeSort'])
function changeSort(index: number) {
  emits('changeSort', index)
}

🐱‍🐉字符串转变量

将字符串转成变量 eval(‘x’) 就是x变量

eval(str).value

ElMessage 提示

import { ElMessage } from 'element-plus'

 ElMessage({
        message: err.message,
        type: 'error',
      })

onMounted写法

onMounted(() => {
 
});

🐱‍🐉销毁钩子写法

onBeforeUnmount(() => {
 
});

导入图标

import { Search, Fold, Expand } from '@element-plus/icons-vue'

##🐱‍🐉 ref 定义节点，取节点

<prop-edit ref="propEdit"></prop-edit>

const propEdit = ref(null);

节点值：

 propEdit.value 

不能使用同一变量名赋值

不能使用 a.value = a

🐱‍🐉store

store 里面没有 mutations 只有 action ,

import dataCenter from '@/stores/dataCenter'
const dataCenterStore = dataCenter()


dataCenterStore.xxx()

插槽

  <template v-slot:header></template>

🐱‍🐉图标

<el-button type="primary" :icon="Search">Search</el-button>

🐱‍🐉变量

reactive定义的变量 不需要 .value  :定义对象。某个属性变化  :不能替换整个对象 
ref定义的变量 需要 .value  

🐱‍🐉计算属性

计算属性：

const fullName = computed({
  // getter
  get() {
    return firstName.value + ' ' + lastName.value
  },
  // setter
  set(newValue) {
    // 注意：我们这里使用的是解构赋值语法
    [firstName.value, lastName.value] = newValue.split(' ')
  }
})

🐱‍🐉v-for 循环对象

<li v-for="(value, key, index) in myObject">
  {{ index }}. {{ key }}: {{ value }}
</li>

🐱‍🐉reverse() 和 sort() 的时候务必小心！这两个方法将变更原始数组

🐱‍🐉

<!-- 错误 -->
<textarea>{{ text }}</textarea>

<!-- 正确 -->
<textarea v-model="text"></textarea>

🐱‍🐉 input

<input v-model.number="age" />
<input v-model.trim="msg" />

🐱‍🐉响应式对象

 可以使用 Object.assign(obj1,obj2)

🐱‍🐉vue3里面没有filter 过滤，改用函数或者计算属性

          <!-- {{ row.createTime |  filterTime }} -->
 filters: {
    filterTime(val) {
      return val ? parseTime(val) : val
    }
  },

🐱‍🐉 router route

import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()

🐱‍🐉 判断组件名字

v-if="
dialogComponent.name === ‘ModuleSubscribe’ ||
dialogComponent.name === ‘batchApplication’
"