teleport :
功能:将子节点渲染到存在于父组件以外的 DOM
节点
实例:
<!-- to 属性就是目标位置 -->
//1. 相对于body定位
<teleport to="body">
<modal :show="showModal" @close="showModal = false">
modal组件
</modal>
</teleport>
//2. 相对于自己指定的位置
<div id="my-head-wrap"></div>
<teleport to="#my-head-wrap"> </teleport>
setup:
功能:
1、 setup函数是 Composition API(组合API)的入口,setup函数里没有了this上下文,没有了 Options API 的强制代码分离,Composition API 可以更令灵活的切割成各种模块导出;
2、 setup函数只能是同步的,在setup函数中定义的变量和方法最后都是需要 return 才能使用;
import useA from'./a';
import useB from'./b';
import useC fro m'./c';
export default{
setup (props) {
let{ a, methodsA } = useA();
let{ b, methodsB } = useB();
let{ c, methodsC } = useC();
return { a, methodsA, b, methodsB, c, methodsC }
}
}
ref 和 reactive:
reactive: 为对象添加响应式状态,接收一个js对象作为参数, 获取数据值的时候直接获取,不需要加.value;
ref:为基本数据类型要添加响应式状态,获取数据值的时候需要加.value;
import { ref, reactive, toRefs, computed } from 'vue'
setup(){
const name = ref('zhangsan');
const birth = ref(1989);
const now = ref(2021);
const sayName = () =>{
name.value = 'I am ' + name.value
}
const data = reactive({
name: "lisi",
birth: 1990,
now: 2021
});
const refData = toRefs(data)
return {
name,
sayName,
...refData
}
}
toRef 和 toRefs:
toRef:用于为源响应式对象的属性新建一个ref,保持对其源对象属性的响应式连接,接收两个参数:源响应式对象和属性名,返回一个ref数据。例如使用父组件传递的props数据时,要引用props的某个属性且要保持响应式连接时就很有用。
- 获取数据值的时候需要加.value;
- toRef后的ref数据不是原始数据的拷贝,而是引用,改变结果数据的值也会同时改变原始数据;
toRefs: 用于将响应式对象转换为结果对象,其中结果对象的每个属性都是指向原始对象相应属性的ref;常用于es6的解构赋值操作,因为在对一个响应式对象直接解构时解构后的数据将不再有响应式,而使用toRefs可以方便解决这一问题。
- 获取数据值的时候需要加.value
- toRefs后的ref数据不是原始数据的拷贝,而是引用,改变结果数据的值也会同时改变原始数据
- 作用其实和 toRef 类似,只不过 toRef 是一个个手动赋值,而 toRefs 是自动赋值。
import { ref, reactive, toRefs, computed } from 'vue'
setup(){
const name = ref('zhangsan');
const birth = ref(1989);
const now = ref(2021);
const sayName = () =>{
name.value = 'I am ' + name.value
}
const data = reactive({
name: "lisi",
birth: 1990,
now: 2021,
sayName: () => {
console.log(data.name);
data.name = "I am " + data.name;
console.log(data.name);
},
age: computed(() => {
return data.now - data.birth;
}),
});
const { birth } = toRefs(data)
console.log(birth.value)
const refData = toRefs(data)
return {
name,
sayName,
...refData
}
}