vue3.0使用心得

prop

prop修改

1、子组件中无法直接修改prop的参数
2、子组件中定义的常量tmp，触发click事件后，tmp值发生变化，但是页面并不会发生变化

<template>
    <button @click="click">{{ tmp}}</button>
</template>
<script setup lang="ts">
import { computed, defineProps, ref } from 'vue';


const props = defineProps({
    name: String,
})
let tmp=1
const message=computed(()=>{
    return tmp;
})

const click = () => {
    tmp++;
    console.log(tmp)
}
</script>

3、用ref包装解决响应式问题

<template>
    <button @click="click">{{ tmp}}</button>
</template>
<script setup lang="ts">
import { computed, defineProps, ref } from 'vue';


const props = defineProps({
    name: String,
})
let tmp=ref(1)
const message=computed(()=>{
    return tmp;
})

const click = () => {
    tmp.value++;
    console.log(tmp)
}

</script>

4、通过子组件emit事件修改父事件的prop
父组件

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <!-- <HelloWorld></HelloWorld> -->
  <NameVue :name=msg @change="change"></NameVue>
</template>

<script setup>
import HelloWorld from './components/HelloWorld.vue';
import NameVue from './components/Name.vue';
import {ref} from 'vue'


let msg = ref("1234")
const change=(para)=>{
  console.log(msg)
  msg.value=para;
  console.log(msg)
}


</script>

子组件

<template>
    <button @click="click">{{ props.name}}</button>
</template>
<script setup lang="ts">
import { computed, defineProps, ref,defineEmits } from 'vue';


const props = defineProps({
    name: String,
})
//ref复制原值，相当于prop修改后不会触发tmp的改变
let tmp=ref(props.name)

const emit = defineEmits(['change'])

const click = () => {

   emit('change',"0000")
}

</script>

5、计算属性的值随参数原值变化而变化，每次调用均会触发计算
6、子组件通过emit使得父组件传递给子组件的props变化，如果在子组件监听props的变化，并且在watch函数中触发emit将会导致循环调用
父组件

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <!-- <HelloWorld></HelloWorld> -->
  <br>
  <NameVue :name=msg @change="change"></NameVue>
</template>

<script setup>
import HelloWorld from './components/HelloWorld.vue';
import NameVue from './components/Name.vue';
import {ref} from 'vue'
var msg = ref(123)
const change=(para)=>{
  msg.value+=para;
}
</script>

子组件

<template>
    <button @click="click">{{ props.name }}</button>
</template>
<script setup lang="ts">
import { computed, defineProps, ref, defineEmits
,watch } from 'vue';


interface Props {
    name?: number
}
const props = withDefaults(defineProps<Props>(), {
    name: 0,
})
const emit = defineEmits(['change'])

const click = () => {
    emit('change',1)
}
watch(props,(val)=>{
    console.log(val);
    emit('change',1);
    })

</script>

v-model使用

1、v-model:value的使用
默认情况下，组件上的 v-model 使用 modelValue 作为 prop 和 update:modelValue 作为事件。我们可以通过向 v-model 传递参数来修改这些名称：
下面两者等价，其中update:title方法默认修改title的值，其中子组件必须emit update:title的事件

<my-component v-model:title="bookTitle"></my-component>
<my-component :title="bookTitle" @"update:title"></my-component>

直接使用v-model=“xxx”
等价于：v-model:modelValue=“xxx”

//App.vue
<script>
import CustomInput from './CustomInput.vue'

export default {
  components: { CustomInput },
  data() {
    return {
      message: 'hello'
    }
  }
}
</script>

<template>
  <CustomInput v-model="message" /> {{ message }}
</template>
//CustomInput .vue
<script>
export default {
  props: ['modelValue'],
  emits: ['update:modelValue']
}
</script>

<template>
  <input
    :value="modelValue"
    @input="$emit('update:modelValue', $event.target.value)"
  />
</template>

等价于

//App.vue
<script>
import MyComponent from './MyComponent.vue'

export default {
  components: { MyComponent },
  data() {
    return {
      title: 'v-model argument example'
    }
  }
}
</script>

<template>
  <h1>{{ title }}</h1>
  <MyComponent v-model:title="title" />
</template>
//MyComponent.vue
<script>
export default {
  props: ['title'],
  emits: ['update:title']
}
</script>

<template>
  <input
    type="text"
    :value="title"
    @input="$emit('update:title', $event.target.value)"
  />
</template>

ref操作dom元素

1、通过:ref来计算js表达式
2、ref的操作元素名称必须在下方中通过ref()命名相同元素

<template>
    <button @click="click">{{ props.name }}</button>
    <!-- ref=asd123 -->
    <div :ref="'asd' + props.name.toString()" @click="hideshow">{{ props.name.toString() + 'asd' }}</div>
</template>
<script setup lang="ts">
import {
    computed, defineProps, ref, defineEmits
    , watch
} from 'vue';
let asd123 = ref(null);//refs

interface Props {
    name?: number
}
const props = withDefaults(defineProps<Props>(), {
    name: 0,
})
let show = ref(false)
const emit = defineEmits(['update:name'])
const click = () => {
    if (asd123.value.style.display == '') {
        asd123.value.style = "display:none"
    } else {
        asd123.value.style = "display:''"
    }
}
const hideshow = (a: MouseEvent) => {
    console.log(a)
    console.log(asd123.value)
    console.log(asd123.value.style.display)
}

</script>

onMounted

onMounted加载时页面已经完成渲染，因此如果使用非响应式的变量，会导致页面初次渲染的时候未能渲染出该节点（该节点通过判断该变量来渲染）

vue3.0变量范围

onMounted定义的变量无法被computed的计算属性获得
可以理解为computed发生在onMounted之前

onMounted(()=>{
  console.log(props.cellValue)
  let a = 1;
  console.log(a)
})
const formState = computed(() => {
  console.log(a + 1)
});

computed使用

只有当依赖的响应式属性变化了，计算属性才会重新计算。
计算属性应包含（响应式变量）
A0变化的时候会打印执行computed
A1变化的时候则会打印出 执行computed 执行computed3

const tet = ()=>{
  A0.value++
}
const tet1 = ()=>{
  A1.value++
}
const A0 = ref(0)
const A1 = ref(1)
const A2 = computed(() => {
  console.log('执行computed')
  return A0.value + A1.value
})

const A3 = computed(() => {
  console.log('执行computed3')
  return  A1.value
})

v-for v-model共同使用

 <tr v-for="(m,i) in array" :key="i">
      <td> 
         <Textarea v-model:value="array[i].xxx"></Textarea>
      </td>
</tr>

vue3.0常用写法

<ModifyCompare :orderInfo="props.orderInfo"></ModifyCompare>
<img src="/src/assets/arrow.png" style="width:25px">