<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="icon" href="/favicon.ico"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vite App</title> </head> <body> <!-- 和webpack创建的工程区别,index.html放在了pubic的外面 --> <!-- Vite以index.html作为入口,不再使用main.js作为入口了 --> <!-- 对于vite构建工具来说,配置文件时vite.config.js --> <!-- 这个vite.config.js类似于webpack打包的vue.config.js --> <div id="app"></div> <script type="module" src="/src/main.js"></script> </body> </html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title>
</head>
<body>
<!-- 和webpack创建的工程区别,index.html放在了pubic的外面 -->
<!-- Vite以index.html作为入口,不再使用main.js作为入口了 -->
<!-- 对于vite构建工具来说,配置文件时vite.config.js -->
<!-- 这个vite.config.js类似于webpack打包的vue.config.js -->
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
<template> <h1>{ { counter }}</h1> <button @click="add">加一</button> <User></User> </template> <script setup> // 这是一个语法糖 // 仅支持setup import User from "./components/User.vue"; // 引入组件即可不需要我们注册 import {ref} from "vue"; let counter = ref(100); function add(){ counter.value++; } // export default { // name : "App", // setup(){ // let counter = ref(100); // function add(){ // counter.value++; // } // return {counter,add}; // } // } </script> <style> </style><template>
<h1>{ { counter }}</h1>
<button @click="add">加一</button>
<User></User>
</template>
<script setup>
// 这是一个语法糖
// 仅支持setup
import User from "./components/User.vue";
// 引入组件即可不需要我们注册
import {ref} from "vue";
let counter = ref(100);
function add(){
counter.value++;
}
// export default {
// name : "App",
// setup(){
// let counter = ref(100);
// function add(){
// counter.value++;
// }
// return {counter,add};
// }
// }
</script>
<style>
</style>
<template> <h1>我是user</h1> </template> <script setup> </script><template>
<h1>我是user</h1>
</template>
<script setup>
</script>
import {customRef} from "vue"; export default function(){ // 自己定义一个ref function useDebouncedRef(value){ // 自定义的ref函数体需要符合ref规范 // 通过调用customRef来获取一个ref实例 // 调用customRef必须要给出一个回调函数作为形参factory // 对于这个factory函数来说,有两个重要参数track,trigger // track是追踪的意思,trigger是触发的意思 const x = customRef((track,trigger)=>{ let t; // 这个factory回调函数必须有返回对象 // 且这个返回必须有get(set非必须) return { // 模板语句只要使用到该数据,get会自动调用 get(){ console.log("get执行了"); // 还要在get里面用track追踪告诉vue这个value发生的变化 track(); return value; }, // 模板语句修改该数据会自动调用set方法 set(newValue){ console.log("set执行了"); // 如果输入较快会导致底层同时出现多个setTimeout函数 // 会导致抖动问题的出现(屏幕上内容闪烁跳动) clearTimeout(t); // 成功解决了防抖问题 t = setTimeout(() => { value = newValue; // 触发一下即通知去调用get方法 trigger(); },1000); } } }); return x; } let name = useDebouncedRef(""); return name; }import {customRef} from "vue";
export default function(){
// 自己定义一个ref
function useDebouncedRef(value){
// 自定义的ref函数体需要符合ref规范
// 通过调用customRef来获取一个ref实例
// 调用customRef必须要给出一个回调函数作为形参factory
// 对于这个factory函数来说,有两个重要参数track,trigger
// track是追踪的意思,trigger是触发的意思
const x = customRef((track,trigger)=>{
let t;
// 这个factory回调函数必须有返回对象
// 且这个返回必须有get(set非必须)
return {
// 模板语句只要使用到该数据,get会自动调用
get(){
console.log("get执行了");
// 还要在get里面用track追踪告诉vue这个value发生的变化
track();
return value;
},
// 模板语句修改该数据会自动调用set方法
set(newValue){
console.log("set执行了");
// 如果输入较快会导致底层同时出现多个setTimeout函数
// 会导致抖动问题的出现(屏幕上内容闪烁跳动)
clearTimeout(t);
// 成功解决了防抖问题
t = setTimeout(() => {
value = newValue;
// 触发一下即通知去调用get方法
trigger();
},1000);
}
}
});
return x;
}
let name = useDebouncedRef("");
return name;
}
import {ref,watch} from "vue"; export default function(name){ let newName = ref(name.value); watch(name,(newValue) => { // 侦听属性 setTimeout(() => { newName.value = newValue; },1000); }); return newName; }import {ref,watch} from "vue";
export default function(name){
let newName = ref(name.value);
watch(name,(newValue) => {
// 侦听属性
setTimeout(() => {
newName.value = newValue;
},1000);
});
return newName;
}