リアクティブとリファレンスの比較
// 定义变量
import {
reactive } from 'vue';
const person = reactive({
name: "John",
age: 25,
});
// 赋值修改
person.name = "Tom";
person.age = 26;
// 使用变量
<div>{
{
person.name }}</div>
<button @click="person.age++">Increase Age</button>
console.log(person.name); // 输出当前名称
person.age++; // 增加年龄
// 使用toRefs
let {
name, age} = toRefs(person)
<div>{
{
name }}</div>
console.log(name.value); // 输出当前名称
// 定义变量
import {
ref } from 'vue';
const name = ref("John");
const age = ref(25);
// 赋值修改
name.value = "Tom";
age.value = 26;
// 使用变量
<div>{
{
name }}</div>
<button @click="age++">Increase Age</button>
console.log(name.value); // 输出当前名称
age.value++; // 增加年龄
フォームが水平方向にインラインでレイアウトされている場合、clearable 属性が入力に追加された後、マウスを移動すると入力コンテンツの幅が変更され、フォーカスが失われると元の幅に戻ります。
- 理由: el-input には幅がありません。実際にレンダリングされた el-input の幅 = ネイティブ入力の幅 + プレフィックス アイコンの幅 + サフィックス アイコンの幅
- 解決策: 入力の幅は 215 ピクセルに設定され、これは選択ボックスとまったく同じです。
<el-input v-model="formInline.user" placeholder="Approved" clearable style="width:215px" />
デフォルトのボタンは中央ですが、vue2 よりもはるかに大きくなっています。
- ruoyi.scss オーバーライド スタイル
.el-button--middle,
.el-button--default {
height: 28px;
font-size: 12px;
}
フォームがリセットされるときは、props 属性をフォーム項目に追加する必要があります。追加しないと機能しません。
テーブルデータの割り当て、ビューは更新されません
問題の原因は、
tableData がプロキシ オブジェクトではないことです。tableData に直接新しい値を代入すると、ビューが更新されません。
後からテーブルがプロキシ オブジェクトとして定義され、失敗の原因になります。配列が変更されることです 場合によっては、vue3 が
vue3 に応答できないことがあります プロキシを使用してオブジェクトに対して 配列全体や値全体を直接割り当てることはできません
失敗例: インターフェイス データを取得してリスト arr に割り当てる
const arr = reactive([]);
const load = (res) => {
arr = res; // 方法1 失败，直接赋值丢失了响应性
arr.concat(res); // 方法2 这样也是失败
};
解決策: 成功事例
// 方案1：创建一个响应式对象，对象的属性是数组
const data = reactive({
arr: []
});
data.arr = res
// 方案2: 使用ref函数定义
const arr= ref([])
arr.value = res
// 方案3: 使用数组的push方法
const arr = reactive([])
arr.push(...res)
配列オブジェクトの TS 書き込みメソッド - 上記の成功例に倣う
- オプション 1: プロパティが配列である応答性オブジェクトを作成する
interface List {
date: string,
name: string,
address: string
}
interface Table {
tableData: List[]
}
let table: Table = reactive({
tableData: []
})
let getList = (data) => {
table.tableData = data
}
- オプション 2: ref 関数定義を使用する
interface List {
date: string,
name: string,
address: string
}
// const userList = ref<any>();
let userList = ref<List[]>([])
let getList = (data) => {
userList.value = data
}
- オプション 3: 配列のプッシュ メソッドを使用する
interface List {
date: string,
name: string,
address: string
}
let tableData: List[] = reactive([])
let getList = (data) => {
tableData.push(...data)
}
reactive で定義された配列を使用し、push 使用後は元のプッシュ内容が最後のデータとなります。
その理由
は、プッシュされるのは値ではなくアドレスであり、配列は同じアドレスを指しているためであり、
プッシュするたびに配列のアドレスが変更されるのと同じであるため、そのたびに最後にプッシュされた内容になります。
解決策: プッシュコンテンツのディープコピーを作成してプッシュします。
let table: Table = reactive({
tableData: []
})
let add = ()=>{
table.tableData.push(JSON.parse(
JSON.stringify(addForm)
))
}
概要: リアクティブおよびインターフェイスの使用シナリオ
interface Option {
username: string;
phone: string;
}
interface Op {
visible: boolean;
user: Option[];
}
let addOption: Op = reactive({
visible: false,
user: [
{
username: "",
phone: "",
},
],
});
? の使用法
小道具の型定義
