基于Vue.js改造遗留PHP代码的技术疑问

Hey there! Let's break down your questions one by one—this is a super common path when migrating from PHP templates to Vue, so you're on the right track.

Using a CDN is totally fine, but repeating the link across 4 pages isn't ideal for maintainability. Here's what I'd recommend:

• Centralize the CDN import: Add the Vue CDN link to a shared PHP template (like header.php) that's included in all your pages. This way, you only update it once if you need to change versions, and all pages that need Vue get it automatically.
• Conditional loading (optional): If some pages don't use Vue at all, wrap the CDN link in a PHP condition (e.g., <?php if ($needsVue) { ?> <script src="vue-cdn-link"></script> <?php } ?>) to avoid unnecessary network requests.

Either way, you don't have to manually add it to 4 separate pages—centralization is key here.

Your current method (new Vue({el: '[vue="first_feature"]'})) works, but it's not the most robust. Here's why and how to improve it:

• Use unique IDs instead of custom attributes: Attribute selectors like [vue="first_feature"] could accidentally match multiple elements if you reuse the attribute value elsewhere. Instead, use a unique id for each feature's root element:

  <div id="first-feature"></div>
  

  Then mount with:

  new Vue({ el: '#first-feature' })
  

• Avoid nested mounts: Make sure each Vue instance is mounted to a standalone element that isn't inside another Vue instance's root—this prevents unexpected reactivity issues.

Using data-* attributes gets messy fast, especially with lots of variables or complex data. Here are two cleaner approaches:

Option 1: Inject PHP data into a global window variable #

This is great for larger datasets or when you need to share data across multiple Vue instances/components:

<?php
// Convert PHP data to valid JSON (json_encode handles escaping automatically!)
$vueData = json_encode([
    'var1' => $this->var1,
    'var2' => $this->var2,
    'someLink' => \link\to\Something(),
    'packages' => $this->variablesOjbect['value']
]);
?>

<script>
// Make the data accessible globally
window.firstFeatureData = <?php echo $vueData; ?>;
</script>

Then in your Vue instance:

new Vue({
    el: '#first-feature',
    data() {
        // Use the global data as your Vue instance's data
        return window.firstFeatureData;
    }
});

Option 2: Directly pass data to the Vue instance #

For smaller, feature-specific datasets, you can inject data directly into the Vue instance's data option:

new Vue({
    el: '#first-feature',
    data: {
        var1: <?php echo json_encode($this->var1); ?>,
        var2: <?php echo json_encode($this->var2); ?>,
        someLink: <?php echo json_encode(\link\to\Something()); ?>,
        packages: <?php echo json_encode($this->variablesOjbect['value']); ?>
    }
});

Always use json_encode! It ensures your PHP values are converted to valid JavaScript (handles strings with quotes, arrays, etc.).

Handling Child Components (Your <view> Tags) #

Your existing <view> tags are PHP-side includes, but with Vue, you'll want to replace them with reusable Vue components. Here's how to set this up:

1. Create a separate component file (e.g., /js/components/SomeSubComponent.js):

// Define the component globally (works without build tools)
Vue.component('some-sub-component', {
    // Declare props the component expects to receive
    props: ['var1', 'packages', 'someLink'],
    // Your component's template (replace with your existing <view> content)
    template: `
        <div>
            <a :href="someLink">Link</a>
            <p>{{ var1 }}</p>
            <ul>
                <li v-for="pkg in packages" :key="pkg.id">{{ pkg.name }}</li>
            </ul>
        </div>
    `
});

2. Load the component in your page:
   Make sure to load the component after Vue, but before your feature's Vue instance:

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script src="/js/components/SomeSubComponent.js"></script>
<script src="/js/first-feature.js"></script>

3. Use the component in your Vue template (replace the PHP <view> tag):
   If your feature's root element has a template (or you're using inline templates), use the component and pass props:

<div id="first-feature">
    <some-sub-component 
        :var1="var1" 
        :packages="packages" 
        :some-link="someLink"
    ></some-sub-component>
</div>

Note: In HTML, props use kebab-case (some-link) to match the camelCase prop name (someLink) in the component—Vue handles the conversion automatically.

As you add more components, keeping them in separate .js files will keep your codebase clean. You can even group related components into subdirectories (e.g., /js/components/checkout/, /js/components/profile/). Eventually, if your project grows, you might want to switch to a build tool like Vite or Vue CLI to bundle components, but for now, separate JS files work perfectly.

内容的提问来源于stack exchange，提问作者Sammi