【前端面试3+1】18 vue2和vue3父传子通信的差别、props传递的数据在子组件是否可以修改、如何往window上添加自定义属性、【多数元素】

一、vue2和vue3父传子通信的差别

1、Vue2

父组件向子组件传递数据通常通过props属性来实现。父组件可以在子组件的标签中使用v-bind指令将数据传递给子组件的props属性。在子组件中，可以通过props属性来接收这些数据。这种方式是一种单向数据流的方式，父组件传递数据给子组件，子组件接收并渲染这些数据。

vue2中使用props属性传递数据示例：

<!-- ParentComponent.vue -->
<template>
  <ChildComponent :message="parentMessage" />
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  data() {
    return {
      parentMessage: 'Hello from parent'
    };
  },
  components: {
    ChildComponent
  }
};
</script>

<!-- ChildComponent.vue -->
<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  props: ['message']
};
</script>

2、Vue3

        Vue3除了仍然可以使用props来进行父子组件通信外，Vue 3引入了一个新的API，即attrs和emit。通过attrs，父组件可以向子组件传递属性，而子组件可以通过emit向父组件发送事件。这种方式使得父子组件之间的通信更加灵活，子组件可以通过emit触发事件，父组件可以监听这些事件并做出相应的响应。

        还引入了v-model指令的改进，使得父组件可以通过v-model指令双向绑定数据到子组件。这样父组件可以直接修改子组件中的数据，而不需要通过事件和属性来进行通信。

在Vue 3中，可以使用attrs属性传递数据的示例代码如下：

<!-- ParentComponent.vue -->
<template>
  <ChildComponent v-bind="attrs" @child-event="handleChildEvent" />
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  data() {
    return {
      attrs: {
        message: 'Hello from parent'
      }
    };
  },
  components: {
    ChildComponent
  },
  methods: {
    handleChildEvent(data) {
      console.log('Received data from child:', data);
    }
  }
};
</script>

<!-- ChildComponent.vue -->
<template>
  <button @click="emitEvent">Click me</button>
</template>

<script>
export default {
  methods: {
    emitEvent() {
      this.$emit('child-event', 'Data from child');
    }
  }
};
</script>

父组件通过attrs属性向子组件传递message属性，子组件通过$emit方法触发child-event事件，并将数据传递给父组件。父组件可以监听child-event事件并处理子组件传递的数据

二、props传递的数据在子组件是否可以修改？

不能！ 

在Vue中，props 是单向数据流的，意味着父组件传递给子组件的 props 数据在子组件中是只读的，子组件不能直接修改 props 数据。

！！！然而，如果子组件需要修改传递下来的数据，可以通过以下方式实现：

        子组件就间接地修改父组件传递下来的数据

        1、在子组件内部使用 data 属性：子组件可以将 props 数据作为初始值，然后在子组件内部将其赋值给 data 属性中的变量，从而可以在子组件内部修改这些数据。

<template>
  <div>
    <p>{{ modifiedMessage }}</p>
    <button @click="modifyMessage">Modify Message</button>
  </div>
</template>

<script>
export default {
  props: ['message'],
  data() {
    return {
      modifiedMessage: this.message
    };
  },
  methods: {
    modifyMessage() {
      this.modifiedMessage = 'Modified message';
    }
  }
};
</script>

1. 2、通过触发事件向父组件传递修改后的数据：子组件可以通过 $emit 方法触发一个自定义事件，并将修改后的数据传递给父组件，由父组件来更新数据。

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="modifyMessage">Modify Message</button>
  </div>
</template>

<script>
export default {
  props: ['message'],
  methods: {
    modifyMessage() {
      this.$emit('update:message', 'Modified message');
    }
  }
};
</script>

父组件可以监听子组件触发的事件，并在事件处理程序中更新数据。

<template>
  <div>
    <ChildComponent :message="parentMessage" @update:message="updateMessage" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  data() {
    return {
      parentMessage: 'Hello from parent'
    };
  },
  components: {
    ChildComponent
  },
  methods: {
    updateMessage(newMessage) {
      this.parentMessage = newMessage;
    }
  }
};
</script>

三、如何往window上添加自定义属性？ 

在Vue应用中，如果需要向window对象添加自定义属性，

方法一、

可以在Vue实例的生命周期钩子函数中进行操作。

以下是一种常见的方法：

// main.js (或者入口文件)
import Vue from 'vue';
import App from './App.vue';

Vue.config.productionTip = false;

new Vue({
  render: h => h(App),
  created() {
    // 在Vue实例创建时，向window对象添加自定义属性
    window.customProperty = 'Custom Value';
  }
}).$mount('#app');

方法二、

使用Vue插件来实现向window添加自定义属性。

// customPlugin.js
const CustomPlugin = {
  install(Vue) {
    Vue.prototype.$customProperty = 'Custom Value';
    window.customProperty = 'Custom Value';
  }
};

export default CustomPlugin;

定义了一个名为CustomPlugin的插件，通过install方法在Vue实例上添加了一个原型属性$customProperty，同时也向window对象添加了自定义属性customProperty。

然后，在Vue应用的入口文件中使用这个插件：

// main.js (或者入口文件)
import Vue from 'vue';
import App from './App.vue';
import CustomPlugin from './customPlugin';

Vue.config.productionTip = false;

Vue.use(CustomPlugin);

new Vue({
  render: h => h(App)
}).$mount('#app');

        通过这种方式，我们可以在整个Vue应用中通过this.$customProperty访问插件定义的属性，并且也可以通过window.customProperty在全局范围内访问这个属性。

四、算法【多数元素】 

1.题目

        给定一个大小为 n 的数组 nums ，返回其中的多数元素。多数元素是指在数组中出现次数 大于 ⌊ n/2 ⌋ 的元素。

        你可以假设数组是非空的，并且给定的数组总是存在多数元素。

int majorityElement(int* nums, int numsSize) {
}

2.解题

        基本思想是在数组中进行投票，将第一个元素作为候选者，然后对数组中的每个元素进行遍历，如果计数为0，则将当前元素设为候选者，如果和候选者相同则计数加1，否则计数减1。最终选出的候选者就是多数元素。

int majorityElement(int* nums, int numsSize) {
    int count = 0;
    int candidate = 0;

    for (int i = 0; i < numsSize; i++) {
        if (count == 0) {
            candidate = nums[i];
        }
        if (nums[i] == candidate) {
            count++;
        } else {
            count--;
        }
    }
 
    return candidate; // if no majority element exists
}