<script setup >会自动把里面定义的数值和方法return出来
nextTick(()=>{
可以访问更新后的dom
})
计算属性 const computed(()=>{ return })
computed({
get(){ return }
set(){ }
})
watch 监听
监听reactive的对象属性是无效的,ref可以
const changevalue= reactive({ value: 1 }) watch(changevalue.value,()=>{
})
需要改成方法返回
const changevalue= reactive({ value: 1 }) watch(()=>changevalue.value,()=>{
})
深层监听 在参数三 watch("",()=>{},{deep: true})
watchEffect 会立刻执行一遍 相当于immediate:true
渲染完后面执行 {flush: "post"]
使用<script setup>创建的组件都是私有的,得在子组件用defineExpose暴露出去
模板引用ref
const input = ref(null); <input ref="input"
组件 在<script setup 里,组件直接import就会暴露出来,可以直接使用,和react相似
传递参数props相对vue2变成defineProps()
const props= defineProps(["propsvalue"]); 访问props.propsvalue
没有$emit(),defineEmits返回一个emit相当于$emit(),
const emit = defineEmits(["methodName"])
emit("methodName","");
defineEmits可以对参数进行验证
组件内使用v-model
<component v-model="value"
组件内
defineEmits(["update:modelValue"]) defineProps(["modelValue"])
<input :value="modelValue" @input="$emit('update:modelValue',value)"
带修饰符 modelModifiers defineProps(["modelModifiers"])
带参数带修饰符 v-model:title.cap ="value" defineProps(["title,titleModifiers"]) defineEmit(["update:title"])
组合式组件不继承属性,需要写一个新的script,把配置抛出来
<script>
export default{
inheritAttrs:false
}
通过$attrs绑定
访问useAttrs
依赖注入
provide('key",value); 如果value是ref将保持响应式
在<script setup v开头得驼峰式命名得变量都可以被作为一个自定义指令
const vFocus = {
mounted:(el){
el.focus()
}
}
toRef
toRefs 相当于ref的s版,可以一次toref所有属性
shallowReactive()
toRaw() 返回原始数据
v-memo
useAttrs useSlots
css中的v-bind