perf(rate): update change event (#2181)

* perf(rate): update change event

re #2178

* perf: add test

packages/rate/__tests__/rate.spec.ts

@@ -107,4 +107,37 @@ describe('Rate.vue', () => {
 
     expect(thirdStar.style.color).toEqual('rgb(255, 153, 0)')
   })
+
+  test('change event', () => {
+    const wrapper = mount({
+      template: `
+        <div>
+          <el-rate v-model="value" @change="handleChange"></el-rate>
+        </div>
+      `,
+      data() {
+        return {
+          value: 4,
+          changeCount: 0,
+        }
+      },
+      methods:{
+        handleChange() {
+          this.changeCount++
+        },
+      },
+      components: {
+        'el-rate': Rate,
+      },
+    })
+    const vm = wrapper.vm
+    const fourthStar = wrapper.findAll('.el-rate__item')[3].element as HTMLElement
+    fourthStar.click()
+    expect(vm.value).toEqual(4)
+    expect(vm.changeCount).toEqual(0)
+    const fifthStar = wrapper.findAll('.el-rate__item')[4].element as HTMLElement
+    fifthStar.click()
+    expect(vm.value).toEqual(5)
+    expect(vm.changeCount).toEqual(1)
+  })
 })

packages/rate/src/index.vue

@@ -157,6 +157,7 @@ export default defineComponent({
       const matchedValue = map[matchedKeys[0]]
       return isObject(matchedValue) ? matchedValue.value : (matchedValue || '')
     }
+
     const valueDecimal = computed(() => props.modelValue * 100 - Math.floor(props.modelValue) * 100)
     const colorMap = computed(() => isArray(props.colors)
       ? {
@@ -229,12 +230,16 @@ export default defineComponent({
       }
       if (props.allowHalf && pointerAtLeftHalf.value) {
         emit('update:modelValue', currentValue.value)
+        if (props.modelValue !== currentValue.value) {
           emit('change', currentValue.value)
+        }
       } else {
         emit('update:modelValue', value)
+        if (props.modelValue !== value) {
           emit('change', value)
         }
       }
+    }
 
     function handleKey(e: KeyboardEvent) {
       if (rateDisabled.value) {
@@ -267,6 +272,7 @@ export default defineComponent({
     }
 
     const hoverIndex = ref(-1)
+
     function setCurrentValue(value: number, event: MouseEvent) {
       if (rateDisabled.value) {
         return