Vue3+TypeScript学习笔记_typescript toraw

ref与reactive的使用

ref

作用：一般用来定义一个基本类型的响应式数据，创建一个包含响应式数据的引用(reference)对象
用法：js中操作数据: xxx.value，模板中操作数据: 不需要.value
1
2

<template>
  <h2>{{count}}</h2>
  <hr>
  <button @click="update">更新</button>
</template>

<script>
import {
  ref
} from 'vue'
export default {
  /* 使用vue3的composition API */
  setup () {

    // 定义响应式数据 ref对象
    const count = ref(1)
    console.log(count)

    // 更新响应式数据的函数
    function update () {
      // alert('update')
      count.value = count.value + 1
    }

    return {
      count,
      update
    }
  }
}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

reactive

作用：定义多个数据的响应式，内部基于 ES6 的 Proxy 实现，通过代理对象操作源对象内部数据都是响应式的
用法：const proxy = reactive(obj)；// 接收一个普通对象然后返回该普通对象的响应式代理器对象
1
2

<template>
  <h2>name: {{state.name}}</h2>
  <h2>age: {{state.age}}</h2>
  <hr>
  <button @click="update">更新</button>
</template>
<script>
import {
  reactive,
} from 'vue'
export default {
  setup () {
    const state = reactive({
      name: 'tom',
      age: 25,
    })

    const update = () => {
      state.name += '--'
      state.age += 1
    }
    return {
      state,
      update,
    }
  }
}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

toRef 与toRefs的使用

toref

作用：为源响应式对象上的某个属性创建一个 ref对象, 
     二者内部操作的是同一个数据值, 更新时二者是同步的
使用场景：要将响应式对象中得某个属性单独提供给外部使用时
1
2
3

<template>
  <h2>App</h2>
  <p>{{state}}</p>
  <p>{{foo}}</p>
  <p>{{foo2}}</p>

  <button @click="update">更新</button>
</template>

<script lang="ts">

import {
  reactive,
  toRef,
  ref,
} from 'vue'
import Child from './Child.vue'

export default {

  setup () {

    const state = reactive({
      foo: 1,
      bar: 2
    })

    const foo = toRef(state, 'foo')
    const foo2 = ref(state.foo)

    const update = () => {
      state.foo++
      // foo.value++
      // foo2.value++  // foo和state中的数据不会更新
    }

    return {
      state,
      foo,
      foo2,
      update,
    }
  },
}
</script>


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

toRefs

作用：把一个响应式对象转换成普通对象，该普通对象的每个 property 都是一个 ref
使用场景：可以将一个响应式 reactive 对象的所有原始属性转换为响应式的 ref 属性
1
2

<template>
  <div class="page-head">
    <div class="label">筛选项：</div>
    <div class="select-con">
      <el-date-picker
        v-model="queryState.createTime"
        size="small"
        @change="emitChange"
        type="daterange"
        range-separator="-"
        :value-format="'YYYY-MM-DD HH:mm:ss'"
        start-placeholder="发表日期"
        end-placeholder="结束日期"
        :default-time="defaultTime"
        :clearable="false"
        :disabled="queryState.checked"
      >
      </el-date-picker>

      <el-select
        v-model="queryState.searchMethod"
        @change="emitChange"
        clearable
        size="small"
        placeholder="全部搜索方式"
        :popper-append-to-body="false"
        :disabled="queryState.checked"
      >
        <el-option
          v-for="item in searchOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>        
      </el-select>
      
      <el-select
        v-model="queryState.contentScope"
        @change="emitChange"
        clearable
        size="small"
        placeholder="内容范围"
        :popper-append-to-body="false"
        :disabled="queryState.checked"
      >
        <el-option
          v-for="item in contentOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>        
      </el-select>

      <el-select
        v-model="queryState.operationType"
        @change="emitChange"
        clearable
        size="small"
        placeholder="全部操作类型"
        :popper-append-to-body="false"
        :disabled="queryState.checked"
      >
        <el-option
          v-for="item in operationOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>        
      </el-select>

      <el-select
        v-model="queryState.status"
        @change="emitChange"
        clearable
        size="small"
        placeholder="全部状态"
        :popper-append-to-body="false"
        :disabled="queryState.checked"
      >
        <el-option
          v-for="item in statusOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>        
      </el-select>
      
      <el-select
        v-model="queryState.executor"
        @change="emitChange"
        clearable
        size="small"
        placeholder="全部执行者"
        :popper-append-to-body="false"
        :disabled="queryState.checked"
      >
        <el-option
          v-for="item in executorOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>


      <el-input 
        :disabled="queryState.checked" 
        size="small" 
        style="width:274px" 
        v-model="queryState.content" 
        placeholder="请输入文本关键字"
        clearable
        @change="emitChange"></el-input>
    </div>

  </div>

  
</template>

<script lang="ts">
import { ref, onMounted, reactive, toRefs, computed, defineComponent, toRaw, watch } from "vue";

export default defineComponent({
  name: "SearchComponent",
  emits: ["change"],
  setup(props, ctx) {
    const queryState = reactive<{
      [T: string]: any;
    }>({
      tags: null,
      createTime: DefaultDatarange(),
      contentScope: null,
      searchMethod: null,
      operationType:null,
      status:null,
      executor: null,
      keyword: null,
      checked:false,
      appId: null,
      singleAuditContentId:null,
    });
    const state = reactive({
      // sourceOptions: [],
      searchOptions: [
        {
          value: SearchOptions.BAOHAN,
          label: "包含"
        },
        {
          value: SearchOptions.XIANGTONG,
          label: "相同"
        },
        
      ],
      contentOptions: [
        {
          value: ContentOptions.YINGYONG,
          label: "仅引用"
        },
        {
          value: ContentOptions.ALL,
          label: "所有"
        },
        
      ],
      operationOptions: [
        {
          value: OperationOptions.PINGBI,
          label: "屏蔽"
        },
        {
          value: OperationOptions.HUIFU,
          label: "恢复"
        },
        
      ],
      statusOptions: [
        {
          value: StatusOptions.ING,
          label: "进行中"
        },
        {
          value: StatusOptions.FINISH,
          label: "完成"
        },
        
      ],
      executorOptions: []
    });
    
    return {
      ...toRefs(state)
    };
  }
});
</script>

<style scoped lang="scss">
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206

toRaw 与 markRaw的使用

toRaw

作用：将一个由reactive生成的响应式对象转为普通对象
使用：用于读取响应式对象对应的普通对象，对这个普通对象的所有操作，不会引起页面更新
1
2

markRaw

作用：标记一个对象，使其永远不会转换为代理。返回对象本身
使用场景：有些值不应被设置为响应式的，例如复杂的第三方类库等
1
2

<template>
  <h2>{{state}}</h2>
  <button @click="testToRaw">测试toRaw</button>
  <button @click="testMarkRaw">测试markRaw</button>
</template>

<script lang="ts">
import {markRaw, reactive, toRaw,} from 'vue'
export default {
  setup () {
    const state = reactive<any>({
      name: 'tom',
      age: 25,
    })

    const testToRaw = () => {
      const user = toRaw(state)
      user.age++  // 界面不会更新

    }

    const testMarkRaw = () => {
      const likes = ['a', 'b']
      // state.likes = likes
      state.likes = markRaw(likes) // likes数组就不再是响应式的了
      setTimeout(() => {
        state.likes[0] += '--'
      }, 1000)
    }

    return {
      state,
      testToRaw,
      testMarkRaw,
    }
  }
}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

computed 和 watch的使用

computed

    const user = reactive({
      firstName: 'A',
      lastName: 'B'
    })

    // 只有getter的计算属性
    const fullName1 = computed(() => {
      console.log('fullName1')
      return user.firstName + '-' + user.lastName
    })

    // 有getter与setter的计算属性
    const fullName2 = computed({
      get () {
        console.log('fullName2 get')
        return user.firstName + '-' + user.lastName
      },

      set (value: string) {
        console.log('fullName2 set')
        const names = value.split('-')
        user.firstName = names[0]
        user.lastName = names[1]
      }
    })
————————————————
版权声明：本文为CSDN博主「淮城一只猫」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_40280582/article/details/112444461
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

watch

    watch(user, () => {
      fullName3.value = user.firstName + '-' + user.lastName
    }, {
      immediate: true,  // 是否初始化立即执行一次, 默认是false
      deep: true, // 是否是深度监视, 默认是false
    })

    /* 
    watch一个数据
      默认在数据发生改变时执行回调
    */
    watch(fullName3, (value) => {
      console.log('watch')
      const names = value.split('-')
      user.firstName = names[0]
      user.lastName = names[1]
    })

    /* 
    watch响应式对象中某个值
    */
    watch(
	()=> state.a,
	(newValue, oldValue)=> {
		// ... 微队列调用
	},
	options // 配置参数对象 如immediate
    )

    /* 
    watch多个数据: 
      使用数组来指定
      如果是ref对象, 直接指定
      如果是reactive对象中的属性,  必须通过函数来指定
    */
    watch([() => user.firstName, () => user.lastName, fullName3], (values) => {
      console.log('监视多个数据', values)
    })
————————————————
版权声明：本文为CSDN博主「淮城一只猫」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_40280582/article/details/112444461
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41